ITPub博客

首页 > 应用开发 > Java > Java web 使用uploadify 进行上传进度条显示

Java web 使用uploadify 进行上传进度条显示

原创 Java 作者:self_control 时间:2015-08-18 15:53:11 0 删除 编辑

Java Web中使用Uplodify进行文件上传

说在前面的话

1、  uplodify为前段显示进度,不用重复调后台查询上传进度,提高效率。

2、  使用uplodify一定要看官方的api,一定要对应版本,因为这个东西版本间差异太大了,没少被它坑!

3、  这个东西相比使用commons-fileupload 监听器,使用起来简单多了。http://blog.itpub.net/30066956/viewspace-1773697/

 

使用步骤

1、  去这个网站下载http://www.uploadify.com ,我项目中未使用html,所以下载的Flash Version 解压后是这个样子。目前最近版本为:v3.2.1

2、  把如上标记的文件加入到项目中。

3、  注意修改uploadify.css中取消图标的对应关系(uploadify-cancel.png

4、页面中加如两个元素,很简单:如下,注意id名称 datafileQueue  datauploadify .这个在后面会用到。

点击(此处)折叠或打开

  1. <div class="content">
  2.            <table border="0" cellspacing="1" cellpadding="0" width="100%" class="tk_table">
  3.               <tr>
  4.                 <td>数据名称:</td>
  5.                 <td><input id="fileName" name="fileName" type="text" class="tk-text" /></td>
  6.               </tr>
  7.               <tr>
  8.                 <td>文件上传:</td>
  9.                 <td>
  10.                  <div id="datafileQueue"></div>
  11.                  <input type="file" name="datauploadify" id="datauploadify" /></td>
  12.               </tr>
  13.                   
  14.               <tr>
  15.                 <td>数据类型:</td>
  16.                 <td><select id="datatype" name="dataFileTypeId" class="tk-text"><option>请选择</option></select></td>
  17.               </tr>
  18.               <tr>
  19.                 <td>描述:</td>
  20.                 <td><textarea id="description" name="description" class="textarea_size"></textarea></td>
  21.               </tr>
  22.            </table>
  23.            
  24.         </div>
  25.         <div class="bottombtn">
  26.             <table width="40%" class="btntalbe">
  27.                 <tr>
  28.                     <td align="center">
  29.                         <input id="btnOk" type="button" value="确定" class="tkbtn surebt" onclick="uploadData()"/></td>
  30.                     <td align="center">
  31.                         <input type="button" class="closeB tkbtn" value="取消" /></td>
  32.                 </tr>
  33.             </table>
  34.         </div>


5、页面初始化时要初始化uploadify,如果用jquery的话,写到ready中。如下
 

点击(此处)折叠或打开

  1. $("#datauploadify").uploadify({
  2.                 'width' : 100,
  3.                 'height' : 20,
  4.                 'queueID' : 'datafileQueue',  //文件列表显示div
  5.                 'multi' : false,              //是否可以多个同时上传
  6.                 'removeTimeout' : 0,          //完成后从列表清除时间,设置0,不用等,直接去掉。
  7.                 'removeCompleted' : true,     //与removeTimeout参数对应,完成后是否从列表清除,设置true,即完成就自动从列表中去除。
  8.                 'queueSizeLimit' : 1,         //列表大小,设置为一,即只能最多上传一个文件。
  9.                 'buttonText'     : 'Browse',  //选择文件按钮显示的文件
  10.                 'auto' : false,               //是否选择了就自动上传,因为我还有其它参数要传,所以这儿选择否。
  11.                 'onUploadSuccess':function(file, data, response){ //上传成功后执行的操作函数
  12.                                         alert(data)
  13.                                  }
  14.             })

6、 注意到没有没设置uploader(提交的action路径),这是因为这个表单还有其它参数要传,所是要通过url传值,这个uploader要在程序中动态设置。如下:


点击(此处)折叠或打开

  1. function uploadData(){
  2.     var fileName = $("#fileName").val()
  3.     var dataFileTypeId = $("#datatype").val()
  4.     var description = $("#description").val()
  5.     var parameters = 'fileName='+fileName+"&dataFileTypeId="+dataFileTypeId+"&description="+description
  6.     var url = 'data/dataAction_saveData.action?'+parameters
  7.     $('#datauploadify').uploadify('settings','uploader',url);
  8.     $('#datauploadify').uploadify('upload','*')
  9. }

     7、 后台与Struts文件上传一样,没什么区别,只是默认的文件对象数据要使用Filedata,对应的文件内容数组,文件内容类型数组就成了 FiledataFileName,FiledataContentType如下:

点击(此处)折叠或打开

  1.     /** 文件对象 */
  2.     private List<File> Filedata;
  3.     /** 文件名 */
  4.     private List<String> FiledataFileName;
  5.     /** 文件内容类型 */
  6.     private List<String> FiledataContentType;
  

       对于使用java的人,这个怎么看怎么不舒服。Java命名规则为变量首字符小写。怎么修改呢?

       查看uploadify doc,有个属性fileObjName,它的默认值为Filedata,可以修改为自己喜欢的,比如fileData。


 

    


8、效果图:


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/30066956/viewspace-1775286/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2014-12-16

  • 博文量
    49
  • 访问量
    373249