官方網址 http://www.uploadify.com/
我使用的版本是 v3.1 Flash 版,
相關的介紹就不用了吧...總之是個好用的工具,而且提供的參數也很夠用。
基本使用方式請參考官方文件 http://www.uploadify.com/documentation/ ( 網路上也很多中文的入門教學 )
我需要調整按鈕樣式 + 警告視窗模式改用 JQuery 的 dialog + 改成中文訊息
1.修改按鈕的樣式
修改下載檔案中的 css 檔案即可,亦可使用官方提供的參數 buttonClass 增加 class 名稱
因為我還要改 :hover 跟 :active ,所以我是直接改 uploadify 的 css 比較快
2.修改警告視窗的文字,有兩個方式,先說比較省力的
[ 方法1 ]
直接修改下載檔案中的 jquery.uploadify-3.1.js 檔案,把訊息的部份中文化 ( 夠省力了吧! 還可以把 alert 的呼叫改掉 ) 當然載入的時候就要載入這個 js ,我想應該不會有人改了這個檔案卻載入 min.js 吧.... 其中需要注意的是,在參數中不可以設定 overrideEvents : [ 'onDialogClose' ] , 因為設了就不會跳警告視窗啦,除非是要自己撰寫事件處理 ( 請看方法2 ) |
[ 方法 2 ]
乖乖的覆寫事件,也可以與 [方法 1] 併用 1.設定要覆寫的事件 使用官方提供的參數 overrideEvents : [ 'onDialogClose' , 'onUploadError' , 'onSelectError' ] 注意 onDialogClose 設定覆寫後,uploadify 預設的警告視窗都不會跳了唷, 但是不設定的話,警告視窗會跳兩次 ( 預設警告+自己定義的視窗 ) 參考文件 : http://www.uploadify.com/forum/#/discussion/8282 其實我測試的結果,好像 overrideEvents 只需要寫 onDialogClose 就可以了....其他沒設定好像也沒差.... 2.修改相關的事件 onUploadError : function(file, errorCode, errorMsg, errorString) {} onSelectError : function(file, errorCode, errorMsg) {} 由於宣告覆寫 onDialogClose 的關係,若要使用 uploadify 回傳的錯誤訊息,不要使用 this.queueData.errorMsg 而是用 function 中接收的參數 errorMsg ( 好奇的人可以自己試 ,就會知道為什麼了 ) 若不想要使用預設的錯誤訊息,就參考下面的錯誤代碼自己定義吧 3.錯誤事件的代號 其實是看 jquery.uploadify-3.1.js 裡的, [ Queue Error ] QUEUE_LIMIT_EXCEEDED : -100, FILE_EXCEEDS_SIZE_LIMIT : -110, ZERO_BYTE_FILE : -120, INVALID_FILETYPE : -130 [ Upload Error ] HTTP_ERROR : -200, MISSING_UPLOAD_URL : -210, IO_ERROR : -220, SECURITY_ERROR : -230, UPLOAD_LIMIT_EXCEEDED : -240, UPLOAD_FAILED : -250, SPECIFIED_FILE_ID_NOT_FOUND : -260, FILE_VALIDATION_FAILED : -270, FILE_CANCELLED : -280, UPLOAD_STOPPED : -290 |
3. 定義上傳成功的動作
這個我就不詳細說明了,大家動作都不一樣嘛~
總之,覆寫 onUploadSuccess : function(file, data, response) {}
一直忘記補上程式碼~我將我寫好的程式碼稍微改一下放上來~
//uploadify的上傳錯誤動作覆寫 var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) { if(errorCode==-280||errorCode==-290) //使用者自己取消的動作不再跳訊息視窗 { return ; } var msgText = "上傳失敗 "; switch(errorCode) { case -200: msgText += "HTTP 錯誤 "+errorMsg; break; case -210: msgText += "上傳檔案遺失,請重新操作"; break; case -230: msgText += "安全性錯誤 "+errorMsg; break; case -240: msgText += "上傳檔案數量最多 "+this.settings.uploadLimit+" 個"; break; case -250: msgText += "上傳失敗 "+errorMsg; break; case -260: msgText += "找不到指定檔案的ID,請重新操作"; break; case -270: msgText += "參數錯誤"; break; case -280: msgText += file.name+" 檔案上傳被取消"; break; case -290: msgText += file.name+" 檔案上傳被停止"; break; default: msgText += "檔案:"+file.name+" 錯誤代號:"+errorCode+" "+errorMsg+" "+errorString; } alert(msgText); } //uploadify的選擇檔案錯誤動作覆寫 var uploadify_onSelectError = function(file, errorCode, errorMsg) { var msgText = "上傳失敗 "; switch(errorCode) { case -100: msgText += "單次上傳的檔案最多 "+this.settings.queueSizeLimit+" 個"; break; case -110: msgText += "檔案大小超過限制( "+this.settings.fileSizeLimit+" )"; break; case -120: msgText += "檔案大小為 0,不可上傳"; break; case -130: msgText += "檔案格式不正確,限 "+this.settings.fileTypeExts; break; default: msgText += "錯誤代號:"+errorCode+" "+errorMsg; } alert(msgText); } //uploadify的檔案上傳成功動作覆寫 var uploadify_onUploadSuccess = function(file, data, response) { /*成功動作*/ alert(file.name + " " + response + " " + data); } var phpsid="PHP的session_id()"; /*這段是用php*/ //上傳插件的參數設定 var uploadify_imgConfig = { width : 80, removeTimeout : 1, fileObjName : 'uploadFile', fileSizeLimit : "20MB", queueSizeLimit: 5, /*單次上傳最多5個*/ successTimeout: 60, /*等待服務器處理文件的時間,默認30s,當超過時,就認為文件已經正確上傳*/ queueID : "uploadifyStatusBox", /*指定進度條都出現在此div中(id="uploadifyStatusBox")*/ swf : "plugin/uploadify/uploadify.swf", uploader : "uploadAction.php", /*上傳處理*/ /*覆寫onDialogClose的原因請看 http://www.uploadify.com/forum/#/discussion/8282/alert-box-flash-version/p1 設定後,uploadify的警告視窗都不會跳,所以需要跳訊息的都要設定*/ overrideEvents : ['onDialogClose','onUploadSuccess','onUploadError','onSelectError'], onUploadSuccess : uploadify_onUploadSuccess, onUploadError : uploadify_onUploadError, onSelectError : uploadify_onSelectError, buttonText : "新增圖片", /*chrome附檔名只能顯示"自定檔",但有生效,另外chrome及ff無法遮蔽捷徑檔*/ fileTypeExts : "*.gif; *.jpg; *.jpeg; *.png", fileTypeDesc:"圖片檔", /* chrome跟ie9利用Flash送出後還能抓到session,但ff不行,官網說這是flash版的bug 官方建議的解決方法 http://www.uploadify.com/documentation/uploadify/using-sessions-with-uploadify/ */ formData : {"action":"uploadAtt","sid":phpsid} /*傳遞參數*/ }; $("#上傳按鈕id").uploadify(uploadify_imgConfig);
我的程式有用到div (id="uploadifyStatusBox") 集中顯示進度條及 var phpsid = PHP 的 session_id() ,要copy程式碼時,記得要修改這兩處。
參考官方的範例:
http://www.uploadify.com/documentation/uploadify/using-sessions-with-uploadify/