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

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属性

属性名 类型 说明
auto boolean 添加到队列后自动上传
buttonImg string 浏览按钮的背景图片
buttonText string 浏览按钮的显示文字
cancelImg string 取消上传按钮的图片
checkScript string 服务端用来检查文件是否重名的脚本
displayData string 上传时显示的提示（percentage百分比/speed速度）
expressInstall string 安装swf的文件(expressInstall.swf)路径
fileDataName string 重定义的input的名称（后台）
fileDesc string 文件打开对话框中的文件类型描述
fileExt string 可允许上传的文件类型
folder string 文件存储的文件夹
height integer 浏览按钮的高度
hideButton boolean 是否隐藏浏览按钮
method string 表单提交方式（post/get）
multi boolean 是否允许上传多个文件
queueID string 上传队列的元素的ID
queueSizeLimit integer 上传队列大小
removeCompleted boolean 完成上传时是否自动删除
rollover boolean 当鼠标移上时产生特效
script string 上传表单提交的目标脚本
scriptAccess string swf的文件地址
scriptData JSON 提交给后台的附加信息
simUploadLimit integer 同时可上传的文件实例数
sizeLimit integer 每文件的最大大小
uploader string uploadify上传的swf文件路径
width integer 浏览按钮的宽度
wmode string flash文件的wmode模式
Uploadify事件

事件名 参数 说明
onAllComplete function(event,data) 当所有文件上传完毕时触发
onCancel function(event,ID,fileObj,data) 当某文件被取消上传时触发
onCheck function() 当开始上传时检查是否重名
onClearQueue function(event) 当执行uploadifyClearQueue()后执行
onComplete function(event, ID, fileObj, response, data) 当某文件上传完毕时触发
onError function(event,ID,fileObj,errorObj) 当上传时有错误返回时触发
onInit function() 当uploadify实例加载完毕时触发
onOpen function(event,ID,fileObj) 当某文件开始上传时触发
onProgress function(event,ID,fileObj,data) 当某文件上传进度改变时触发
onQueueFull function(event,queueSizeLimit) 当上传队列达到限制时触发
onSelect function(event,ID,fileObj) 每个文件被添加到上传队列时触发
onSelectOnce function(event,data) 一次文件被添加到上传队列时触发
onSWFReady function() 当flash加载完毕时触发
Uploadify方法

方法名 说明
.uploadify() 创建Uploadify的实例
.uploadifyCancel() 从上传队列中移除一个文件
.uploadifyClearQueue() 清空上传队列
.uploadifySettings() 修改Uploadify实例的属性
.uploadifyUpload()


</script>