jquery的uploadify外掛程式多檔案上傳配置參數詳解

標籤：des   c   java   a   http   ext   

最近做了個多檔案上傳，需要限制上傳檔案類型的例子。以前沒做過找了一些資料，下次有用。同時也給大家做參考。

uploader： uploadify.swf 檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點擊後淡出開啟檔案對話方塊，預設值：uploadify.swf。

　　 script：　　 幕後處理程式的相對路徑 。預設值：uploadify.php

　　checkScript：用來判斷上傳選擇的文 件在伺服器是否存在的幕後處理程式的相對路徑

　　fileDataName：設定一個名字，在伺服器處理常式中根據該名字來取上傳檔案的 資料。預設為Filedata

　　method： 提交方式Post 或Get 預設為Post

　　 scriptAccess ：flash指令檔的訪問模式，如果在本地測試設定為always，預設值：sameDomain　

　　 folder ：上傳檔案存放的目錄 。

　　queueID ：檔案隊列的ID，該ID與存放檔案隊列的div的ID一致。

　 　queueSizeLimit ：當允許多檔案產生時，設定選擇檔案的個數，預設值：999 。

　　multi ：設定為true時可以上傳多個檔案。

　　auto ：設定為true當選擇檔案後就直接上傳了，為false需要點擊上傳按鈕才上傳 。

　　fileDesc ：這個屬性值必須設定fileExt屬性後才有效，用來設定選擇檔案對話方塊中的提示文本，如設定fileDesc為“請選擇rar doc pdf檔案”，開啟檔案選擇框效果如：

　　fileExt ：設定可以選擇的檔案的類型，格式如：‘*.doc;*.pdf;*.rar‘ 。

　　sizeLimit ：上傳檔案的大小限制 。

　 simUploadLimit ：允許同時上傳的個數 預設值：1 。

　　buttonText ：瀏覽按鈕的文本，預設值：BROWSE 。

　　buttonImg ：瀏覽按鈕的圖片的路徑 。

　　 hideButton ：設定為true則隱藏瀏覽按鈕的圖片 。

　　rollover ：值為true和false，設定為true時當滑鼠移到瀏覽按鈕上時有反轉效果。

　　width ：設定瀏覽按鈕的寬度 ，預設值：110。

　　height ：設定瀏覽按鈕的高度 ，預設值：30。

　　wmode ：設定該項為transparent 可以使瀏覽按鈕的flash背景檔案透明，並且flash檔案會被置為頁面的最高層。 預設值：opaque 。

　 　cancelImg：選擇檔案到檔案隊列中後的每一個檔案上的關閉按鈕表徵圖，如：

　　上面介紹的key 值的value都為字串或是布爾類型，比較簡單，接下來要介紹的key值的value為一個函數，可以在選擇檔案、出錯或其他一些操作的時候返回一些信 息給使用者。

　　onInit :做一些初始化的工作。

　　onSelect：選擇檔案時觸發，該函數有三個參數

　 　event:事件對象。

　　queueID：檔案的唯一標識，由6為隨機字元組成。

　　fileObj：選擇的檔案對 象，有name、size、creationDate、modificationDate、type 5個屬性。

　　代碼如下：

$(document).ready(function() 　
{　
$("#uploadify").uploadify({　
‘uploader‘:　 ‘JS/jquery.uploadify-v2.1.0/uploadify.swf‘,　
‘script‘:　 ‘UploadHandler.ashx‘,　
‘cancelImg‘:　 ‘JS/jquery.uploadify-v2.1.0/cancel.png‘,　
‘folder‘:　‘UploadFile‘, 　
‘queueID‘:　‘fileQueue‘,　
‘auto‘:　false,　
‘multi‘: 　true,　
‘onInit‘:function(){alert("1");},　
‘onSelect‘:　 function(e,　queueId,　fileObj)　
{　
alert("唯一標識:"　+　 queueId　+　" "　+　
"檔案名稱："　+　fileObj.name　+　" "　+　
"檔案大小："　+　fileObj.size　+　" "　+　
"建立時間："　+　 fileObj.creationDate　+　" "　+　
"最後修改時間："　+　 fileObj.modificationDate　+　" "　+　
"檔案類型："　+　fileObj.type　
);　

}　
});　
});　

 

當 選擇一個檔案後彈出的訊息如：

　　 onSelectOnce：在單檔案或多檔案上傳時，選擇檔案時觸發。該函數有兩個參數event，data，data對象有以下幾個屬性：

　 　fileCount：選擇檔案的總數。

　　filesSelected：同時選擇檔案的個數，如果一次選擇了3個檔案該屬性值為3。

　 　filesReplaced：如果檔案隊列中已經存在A和B兩個檔案，再次選擇檔案時又選擇了A和B，該屬性值為2。

　　 allBytesTotal：所有選擇的檔案的總大小。

　　onCancel :當點擊檔案隊列中檔案的關閉按鈕或點擊取消上傳時觸發。該函數有event、queueId、fileObj、data四個參數，前三個參數同

　 　onSelect中的三個參數，data對象有兩個屬性fileCount和allBytesTotal。

　　fileCount：取消 一個檔案後，檔案隊列中剩餘檔案的個數。

　　allBytesTotal：取消一個檔案後，檔案隊列中剩餘檔案的大小。

　 　onClearQueue：當調用函數fileUploadClearQueue時觸發。有event和data兩個參數，同onCancel 中的兩個對應參數。

　　onQueueFull ：當設定了queueSizeLimit並且選擇的檔案個數超出了queueSizeLimit的值時觸發。該函數有兩個參數event和 queueSizeLimit。

　　onError ：當上傳過程中發生錯誤時觸發。該函數有event、queueId、fileObj、errorObj四個參數，其中前三個參數同上，errorObj 對象有type和info兩個屬性。

　　type：錯誤的類型，有三種‘HTTP’, ‘IO’, or ‘Security’

　 　info：錯誤的描述

　onOpen ：點擊上傳時觸發，如果auto設定為true則是選擇檔案時觸發，如果有多個檔案上傳則遍曆整個檔案隊列。該函數有event、queueId、 fileObj三個參數，參數的解釋同上。

　　onProgress：點擊上傳時觸發，如果auto設定為true則是選擇檔案時觸發，如 果有多個檔案上傳則遍曆整個檔案隊列，在onOpen之後觸發。該函數有 event、queueId、fileObj、data四個參數，前三個參數的解釋同上。data對象有四個屬性percentage、 bytesLoaded、allBytesLoaded、speed：

　　percentage：當前完成的百分比

　　 bytesLoaded：當前上傳的大小

　　allBytesLoaded：檔案隊列中已經上傳完的大小

　　 speed：上傳速率 kb/s

　　onComplete：檔案上傳完成後觸發。該函數有四個參數event、queueId、 fileObj、response、data五個參數，前三個參數同上。response為幕後處理程式返回的值，在上面的例子中為1或0，data有兩 個屬性fileCount和speed

　　fileCount：剩餘沒有上傳完成的檔案的個數。

　　speed：檔案上傳 的平均速率 kb/s

　　onAllComplete：檔案隊列中所有的檔案上傳完成後觸發。該函數有event和data兩個參 數，data有四個屬性，分別為：

　　filesUploaded :上傳的所有檔案個數。

　　errors ：出現錯誤的個數。

　　allBytesLoaded ：所有上傳檔案的總大小。

　　speed ：平均上傳速率 kb/s

　　相關函數介紹

　　在上面的例子中已經用了uploadifyUpload和 uploadifyClearQueue兩個函數，除此之外還有幾個函數：

　　uploadifySettings：可以動態修改上面介紹 的那些key值，如下面代碼

　　$(‘#uploadify‘).uploadifySettings(‘folder‘,‘JS‘);

　 　如果上傳按鈕的事件寫成下面這樣，檔案將會上傳到uploadifySettings定義的目錄中

<a　 href="javascript:$(‘#uploadify‘).uploadifySettings(‘folder‘,‘JS‘);

$(‘#uploadify‘).uploadifyUpload()"> 上傳</a>

　　uploadifyCancel：該函數接受一個queueID作為參數，可以取消檔案隊列中 指定queueID的檔案。

　　$(‘#uploadify‘).uploadifyCancel(id);

 

原文轉自：http://hi.baidu.com/whlxjq520/item/7aed756f9b915c0fa1cf0f40