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()	触法文件上传

转载于:https://www.cnblogs.com/pannysp/archive/2012/03/03/2378091.html