上傳文件的時候打算用Ajax方法,這樣用戶體驗好一些,找來找去還是Uploadify好些,可惜相關的幫助文檔不好找,園里有一篇可惜是2年前2.1版本的,和現在最新的3.2版差別很大,很多Option都已經取消了。唯一可用的就是官網(http://www.uploadify.com/),里面的資料還是很詳細的,所以打算把它整理成中文以便於以后查閱(Flash版Uploadify)。
- Options(選項、參數):
| Option | Input Type | Default Value | Required | Info |
| auto | Boolean | true | 選擇文件后是否自動上傳,如果為false則需額外再添加一個按鈕之類的去調用uploadify()函數 | |
| buttonClass | String | Empty String | √ | 設置Uploadify按鈕CSS樣式 |
| buttonCursor | String | 'hand' | 設置鼠標放在Uploadify按鈕上的樣式,可能的值是’hand’ 、‘arrow’ | |
| buttonImage | String | null | 設置按鈕背景圖片的地址,不過推薦寫在CSS中 | |
| buttonText | String | 'SELECT FILES' | 設置按鈕中的文字,支持中文 | |
| checkExisting | String | false | 設置一個路徑在服務器端檢測文件是否已存在,返回1和0分別代表已存在、不存在 | |
| debug | Boolean | false | 轉換到調試模式 | |
| fileObjName | String | 'Filedata' | 設置上傳的文件在服務器端的參數,比如在C#端就可以用Request.Files["Filedata"]獲取上傳的文件 | |
| fileSizeLimit | Number/String | 上傳文件大小限制,默認以KB為單位,也可傳入字符串參數自定義其他單位(B/MB/GB),設置為0代表不限制 | ||
| fileTypeDesc | String | 'All Files' | 瀏覽文件對話框中文件類型的描述 | |
| fileTypeExts | String | '*.*' | 限制上傳文件的拓展名(i.e. ‘*.jpg; *.png; *.gif’) | |
| formData | JSON Object | Empty Object | 如字面意思,文件上傳同時向后台傳遞的表單數據,Json格式傳遞 | |
| height | Number | 30 | 按鈕高度(PX) | |
| itemTemplate | String | false | 可以設置文件上傳隊列的HTML模版,四個模版標簽:1. instanceID:當前Uploadify實例的ID;2. fileID:隊列中文件的ID;3. fileName:文件名4. fileSize:文件大小。這樣插入模版標簽:${fileName} | |
| method | String | 'post' | 提交文件上傳表單的方式:”get”,”post” | |
| multi | Boolean | True | 選擇文件是一次是否能選擇多個 | |
| overrideEvents | JSON Array | Empty Array | 你想要繞過默認事件的腳本名的數組,就是想要覆蓋掉的頁面事件。 | |
| preventCaching | Boolean | true | 防止SWF文件緩存,默認會為SWF文件請求加上一個隨機數參數 | |
| progressData | String | 'percentage' | 顯示上傳進度的方式,百分比/速度:‘percentage’ /‘speed’ | |
| queueID | String | false | 可以手工設置文件上傳隊列的ID,默認會自動生成一個(手工設置ID后就可以自定義CSS樣式了) | |
| queueSizeLimit | Number | 999 | 同一時間,上傳文件隊列的最大數量(不是可上傳文件總數)。如果隊列中的文件數超過此限制,onSelectError的事件被觸發。 | |
| removeCompleted | Boolean | true | 完成的隊列是保持顯示還是移除(DOM) | |
| removeTimeout | Number | 3 | 完成的隊列移除(DOM)的時延秒數 | |
| requeueErrors | Boolean | false | 如果設置為true,則返回錯誤,並重新排隊,嘗試再次上傳文件 | |
| successTimeout | Number | 30 | 文件完成上傳后等待服務器返回響應的時間,如果超過這個時間將會自行斷言上傳成功。 | |
| swf | String | 'uploadify.swf' | √ | uploadify.swf文件的路徑 |
| uploader | String | 'uploadify.php' | √ | 服務器端上傳文件的腳本路徑 |
| uploadLimit | Number | 999 | 允許上傳文件的總數。如果超過這個數量onUploadError事件將會被觸發 | |
| width | Number | 120 | 按鈕寬度(PX) |
- Events事件(函數)
| Event | Arguments | Overridable | Info |
| onCancel | file | 取消上傳時觸發,參數為當前文件對象 | |
| onClearQueue | queueItemCount | 當’cancel’方法以’*’作為參數時觸發,如$('#file_upload').uploadify('cancel','*') | |
| onDestroy | 由’destroy’方法觸發 | ||
| onDialogClose | queueData:包含以下隊列信息:1. filesSelected瀏覽文件對話框中選擇文件的數量 2. filesQueued:添加到隊列中的文件數(沒有返回錯誤的)3.filesReplaced:隊列中的替換的文件數 4. filesCancelled:添加到隊列中取消文件的數量(不是替換) 5. filesErrored:返回錯誤的文件數 | N/A | 當瀏覽文件窗口關閉時被觸發。如果該事件被添加在overrideEvents選項中,那么若添加文件時發生錯誤后,不會提示默認錯誤信息 |
| onDialogOpen | 瀏覽文件窗口打開時觸發 | ||
| onDisable | 由’disable’方法(參數為true時)觸發 | ||
| onEnable | 由’disable’方法(參數為false時)觸發 | ||
| onFallback | 在初始化過程中觸發,如果未檢測到瀏覽器中兼容版本的Flash player | ||
| onInit | Uploadify第一次被調用時初始化最后被調用 | ||
| onQueueComplete | queueData:包含以下隊列信息:uploadsSuccessful、uploadsErrored分別是上傳成功/失敗的文件數量 | 隊列中文件傳輸完成時被調用 | |
| onSelect | file:被選擇的文件對象 | N/A | 當每個文件被選擇並添加到隊列中時觸發 |
| onSelectError | N/A | 當每個文件被選擇時返回錯誤后觸發 | |
| onSWFReady | Flash對象(SWF按鈕)加載完成時觸發 | ||
| onUploadComplete | file:上傳的文件對象或返回一個錯誤。 | N/A | 每個文件上傳完成時,無論是成功或返回一個錯誤觸發一次。 |
| onUploadError | file:已經上傳的文件對象 errorCode:返回的錯誤碼 errorMsg:返回的錯誤信息 errorString:可讀(面向用戶)的錯誤信息,包含作物詳細信息 |
文件上傳后服務器端返回錯誤時觸發 | |
| onUploadProgress | file:上傳文件對象 bytesUploaded:已上傳的字節數 bytesTotal:當前文件的總字節數 totalBytesUploaded:在當前上傳操作上傳的字節總數(所有文件) totalBytesTotal:總要上傳的字節數(所有文件) |
文件上傳進度信息每次更新時觸發(可用於自定義文件上傳進度顯示) | |
| onUploadStart | file:即將上傳的文件對象 | 上傳文件前觸發 | |
| onUploadSuccess | file:已上傳文件的對象 Data:服務器端返回的數據 Response:服務器端返回的響應,成功則為true,無響應則為false |
N/A | 每個文件上傳后服務器返回成功時觸發 |
- Methods內置方法
| Method | Arguments | Info |
| cancel | fileID:可以輸入任意數量文件的ID,如果以“*”作為第一個參數,則隊列中的所有文件將被取消。如果沒有任何文件ID作為參數,則隊列中的第一個文件將被取消。 suppressEvent:如果設置為true,onUploadCancel事件將被阻止。清除隊列時,這是非常有用的。 |
上傳文件時取消隊列中的一個文件 |
| destroy | 清空Uploadify中所有文件輸入,並返回到初始狀態 | |
| disable | setDisabled:設置true/false來禁用/啟用按鈕 | |
| settings | Name:設置的名稱。僅設置這個參數將返回值。 Value:設置的值 resetObjects:設置為true時,更新的postData對象刪除現有的值。否則,新的值將被添加到現有的。 |
獲取或設置某個Uploadify實例的設置選項(Swf文件設置無法改變) |
| stop | 停止當前所有上傳和重新排隊的過程 | |
| upload | fileID:可傳入多個欲上傳文件的ID作為參數,如果僅以“*”作為參數,則代表所有文件 | 上傳特定文件或隊列中所有文件 |
好了,Uploadify客戶端這邊的配置基本就這么多了,補充一點Uploadify 3.2的版本里取消了原先的‘cancelImg’配置選項,而是把它放到了CSS中,現在uploadify-cancel.png這張圖片的路徑(相對uploadify.css)默認為“../img/uploadify-cancel.png”。對於本文中出現的錯誤,歡迎不吝指正。在下一遍隨筆里會介紹服務器端的設置,並做一些demo,現在時間也不早了。
