Jquery Ajax文件上傳插件Uploadify詳解(上)


     上傳文件的時候打算用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   設置一個路徑在服務器端檢測文件是否已存在,返回10分別代表已存在、不存在
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實例的ID2. fileID:隊列中文件的ID3. 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:包含以下隊列信息:uploadsSuccessfuluploadsErrored分別是上傳成功/失敗的文件數量   隊列中文件傳輸完成時被調用
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:如果設置為trueonUploadCancel事件將被阻止。清除隊列時,這是非常有用的。

上傳文件時取消隊列中的一個文件
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,現在時間也不早了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM