官方網址 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 = "上傳失敗\n\n";
switch(errorCode)
{
case -200:
msgText += "HTTP 錯誤\n"+errorMsg;
break;
case -210:
msgText += "上傳檔案遺失，請重新操作";
break;
case -230:
msgText += "安全性錯誤\n"+errorMsg;
break;
case -240:
msgText += "上傳檔案數量最多 "+this.settings.uploadLimit+" 個";
break;
case -250:
msgText += "上傳失敗\n"+errorMsg;
break;
case -260:
msgText += "找不到指定檔案的ID，請重新操作";
break;
case -270:
msgText += "參數錯誤";
break;
case -280:
msgText += file.name+"\n檔案上傳被取消";
break;
case -290:
msgText += file.name+"\n檔案上傳被停止";
break;
default:
msgText += "檔案:"+file.name+"\n錯誤代號:"+errorCode+"\n"+errorMsg+"\n"+errorString;
}
alert(msgText);
}
//uploadify的選擇檔案錯誤動作覆寫
var uploadify_onSelectError = function(file, errorCode, errorMsg) {
var msgText = "上傳失敗\n\n";
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+"\n"+errorMsg;
}
alert(msgText);
}
//uploadify的檔案上傳成功動作覆寫
var uploadify_onUploadSuccess = function(file, data, response) { /*成功動作*/
alert(file.name + "\n\n" + response + "\n\n" + 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/
