uploadify API-ZH-CN.html · uploadify組件上傳

[uploadify API](http://www.cnblogs.com/mahaisong/archive/2011/06/25/2090075.html) 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 ：選擇文件到文件隊列中后的每一個文件上的關閉按鈕圖標事件： onInit : 做一些初始化的工作。 onSelect ：選擇文件時觸發，該函數有三個參數 event:事件對象。 queueID：文件的唯一標識，由6為隨機字符組成。 fileObj：選擇的文件對象，有name、size、creationDate、modificationDate、type 5個屬性。 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：提交 <a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a> uploadifyClearQueue：清楚隊列 <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a> uploadifySettings：可以動態修改上面介紹的那些key值，如下面代碼 $('#uploadify').uploadifySettings('folder','JS');如果上傳按鈕的事件寫成下面這樣，文件將會上傳到uploadifySettings定義的目錄中 <a href="javascript:$('#uploadify').uploadifySettings('folder','JS');$('#uploadify').uploadifyUpload()">上傳</a>uploadifyCancel：該函數接受一個queueID作為參數，可以取消文件隊列中指定queueID的文件。 $('#uploadify').uploadifyCancel(id); 以下是我用到的代碼，可以參考一下： view plaincopy to clipboardprint? <script type="text/javascript">?? $(document).ready(function() {?? $("#uploadify").uploadify({?? ??? 'uploader'?????? : '../images/uploadify.swf',?? ??? 'script'???????? : '<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',?? ??? 'cancelImg'????? : '../images/cancel.png',?? ??? 'folder'???????? : '/',?? ??? 'queueID'??????? : 'fileQueue',?? ??? 'fileDataName'?? : 'uploadify',?? ??? 'fileDesc'?????? : '支持格式:xls.',??? ??? 'fileExt'??????? : '*.xls',?? ??? 'auto'?????????? : false,?? ??? 'multi'????????? : true,?? ??? 'height'???????? : 20,?? ??? 'width'????????? : 50,?? ??? 'simUploadLimit' : 3,?? ?? //'buttonText'???? : 'fdsfdsf...',?? ??? 'buttonImg'????? : '../images/browse.jpg',?? ?? // 'hideButton'???? : true,?? ?? // 'rollover'?????? : true,?? ??? 'wmode'????????? : 'transparent' ,?? ??? onComplete?????? : function (event, queueID, fileObj, response, data)?? ???? {??? ????? $('<li></li>').appendTo('.files').text(response);??? ???? },??? ??? onError????????? : function(event, queueID, fileObj)?? ???? {??? ?????? alert("文件:" + fileObj.name + " 上傳失敗");??? ???? }??? // onCancel???????? : function(event, queueID, fileObj)?? // {??? //???? alert("取消文件：" + fileObj.name);??? // }??? ?? }); <script type="text/javascript"> $(document).ready(function() { $("#uploadify").uploadify({ ??? 'uploader'?????? : '../images/uploadify.swf', ??? 'script'???????? : '<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do', ??? 'cancelImg'????? : '../images/cancel.png', ??? 'folder'???????? : '/', ??? 'queueID'??????? : 'fileQueue', ??? 'fileDataName'?? : 'uploadify', ??? 'fileDesc'?????? : '支持格式:xls.', ??? 'fileExt'??????? : '*.xls', ??? 'auto'?????????? : false, ??? 'multi'????????? : true, ??? 'height'???????? : 20, ??? 'width'????????? : 50, ??? 'simUploadLimit' : 3, ?? //'buttonText'???? : 'fdsfdsf...', ??? 'buttonImg'????? : '../images/browse.jpg', ?? // 'hideButton'???? : true, ?? // 'rollover'?????? : true, ??? 'wmode'????????? : 'transparent' , ??? onComplete?????? : function (event, queueID, fileObj, response, data) ???? { ????? $('<li></li>').appendTo('.files').text(response); ???? }, ??? onError????????? : function(event, queueID, fileObj) ???? { ?????? alert("文件:" + fileObj.name + " 上傳失敗"); ???? } // onCancel???????? : function(event, queueID, fileObj) // { //???? alert("取消文件：" + fileObj.name); // } ?? }); 要注意的是，我的script屬性值是一個請求路徑，我發現在我設置了同時上傳多個文件后(比如3)，并不是每請求一次去上傳3個文件，而仍然是執行3次請求，請求一次上傳一個文件。這也沒辦法，uplodify有那么多回調函數，要是一次處理多個，那回調函數的參數就不知道拿哪個了，因為這些參數都不是數組。也就是說，無論你設置同時上傳幾個文件，它都會一個一個去請求并上傳，只是表面上感覺好像有多個線程同時在處理上傳請求一樣，只是表象而已。而且如果你把simUploadLimit設置過大就會經常出錯，我設置成5的時候經常會有一兩個文件上傳失敗。