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

属性名类型说明

autoboolean添加到队列后自动上传

buttonImgstring浏览按钮的背景图片

buttonTextstring浏览按钮的显示文字

cancelImgstring取消上传按钮的图片

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

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

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

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

fileDescstring文件打开对话框中的文件类型描述

fileExtstring可允许上传的文件类型

folderstring文件存储的文件夹

heightinteger浏览按钮的高度

hideButtonboolean是否隐藏浏览按钮

methodstring表单提交方式（post/get）

multiboolean是否允许上传多个文件

queueIDstring上传队列的元素的ID

queueSizeLimitinteger上传队列大小

removeCompletedboolean完成上传时是否自动删除

rolloverboolean当鼠标移上时产生特效

scriptstring上传表单提交的目标脚本

scriptAccessstringswf的文件地址

scriptDataJSON提交给后台的附加信息

simUploadLimitinteger同时可上传的文件实例数

sizeLimitinteger每文件的最大大小

uploaderstringuploadify上传的swf文件路径

widthinteger浏览按钮的宽度

wmodestringflash文件的wmode模式

Uploadify事件

事件名参数说明

onAllCompletefunction(event,data)当所有文件上传完毕时触发

onCancelfunction(event,ID,fileObj,data)当某文件被取消上传时触发

onCheckfunction()当开始上传时检查是否重名

onClearQueuefunction(event)当执行uploadifyClearQueue()后执行

onCompletefunction(event,ID,fileObj,response,data)当某文件上传完毕时触发

onErrorfunction(event,ID,fileObj,errorObj)当上传时有错误返回时触发

onInitfunction()当uploadify实例加载完毕时触发

onOpenfunction(event,ID,fileObj)当某文件开始上传时触发

onProgressfunction(event,ID,fileObj,data)当某文件上传进度改变时触发

onQueueFullfunction(event,queueSizeLimit)当上传队列达到限制时触发

onSelectfunction(event,ID,fileObj)每个文件被添加到上传队列时触发

onSelectOncefunction(event,data)一次文件被添加到上传队列时触发

onSWFReadyfunction()当flash加载完毕时触发

Uploadify方法

方法名说明

.uploadify()创建Uploadify的实例

.uploadifyCancel()从上传队列中移除一个文件

.uploadifyClearQueue()清空上传队列

.uploadifySettings()修改Uploadify实例的属性

.uploadifyUpload()

</script>