JQuery批量上传插件Uploadify使用详解及参数说明

luochaotj

2015-08-26

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。官方提供的实例是php版本的，您可以点击下面的链接进行浏览或下载。

JSP前台页面:

<script type="text/javascript">
   $(document).ready( function() {
   $("#uploadify").uploadify( {//初始化函数

    'uploader' :'uploadify.swf',//flash文件位置，注意路径
'script' :'servlet/Upload',//后台处理的请求
'cancelImg' :'images/cancel.png',//取消按钮图片
'folder' :'uploads',//您想将文件保存到的路径
'queueID' :'fileQueue',//与下面的上传文件列表id对应
'queueSizeLimit' :8,//上传文件的数量
'scriptData':{'a':'value1','b':'value2'},//向后台传的数据
'fileDesc' :'rar文件或zip文件',//上传文件类型说明
'fileExt' :'*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
'method':'get',//如果向后台传输数据，必须是get
'sizeLimit':1000,//文件上传的大小限制，单位是字节
'auto' :false,//是否自动上传
'multi' :true,
    'simUploadLimit' :2,//同时上传文件的数量
'buttonText' :'BROWSE',//浏览按钮图片
'onComplete': function(event, queueID, fileObj,serverData,data) {//当上传完成后的回调函数，ajax方式哦~~
     alert(data.speed); 
    }
   });
});

</script>



<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>

<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
    <a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;
    <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
</p>

java后台：

String savePath = this.getServletConfig().getServletContext().getRealPath("");

   savePath = savePath + "/uploads/";

   File f1 = new File(savePath);

   System.out.println(savePath);

   if (!f1.exists()) {

    f1.mkdirs();

   }

   DiskFileItemFactory fac = new DiskFileItemFactory();

   ServletFileUpload upload = new ServletFileUpload(fac);

   upload.setHeaderEncoding("utf-8");

   List fileList = null;

   try {

    fileList = upload.parseRequest(request);

   } catch (FileUploadException ex) {

    ex.printStackTrace();
    return;

   }

   Iterator it = fileList.iterator();

   while (it.hasNext()) {

    FileItem item = (FileItem) it.next();

    if (!item.isFormField()) {

     name = item.getName();

     long size = item.getSize();

     String type = item.getContentType();

     if (name == null || name.trim().equals("")) {

      continue;

     }

     // 扩展名格式：

     if (name.lastIndexOf(".") >= 0) {

      extName = name.substring(name.lastIndexOf("."));

     }

     File file = null;

     do {

      // 生成文件名：

      name = UUID.randomUUID().toString();

      file = new File(savePath + name + extName);

     } while (file.exists());

     File saveFile = new File(savePath + name + extName);

     try {

      item.write(saveFile);

     } catch (Exception e) {

      e.printStackTrace();

     }

    }

   }
   response.getWriter().print(name + extName);

代码很好懂，不讲解了。

下面是官方英文文档的一些翻译。此文档是2.14版本的，现在出了3.0版本，属性和事件名称有改变，注意参考JS文件

Uploadify属性

属性名类型说明

autoboolean添加到队列后自动上传

buttonImgstring浏览按钮的背景图片

buttonTextstring浏览按钮的显示文字

cancelImgstring取消上传按钮的图片

checkScriptstring服务端用来检查文件是否重名的脚本

displayDatastring上传时显示的提示（percentage百分比/speed速度）

expressInstallstring安装swf的文件(expressInstall.swf)路径

fileDataNamestring重定义的input的名称（后台）