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()	觸法文件上傳