搜索

QQ空间 QQ好友新浪微博微信

[JQuery] Uploadify v3.1 (上傳檔案插件) 使用記錄

青松卓然 2012-11-08

展开全文

[JQuery] Uploadify v3.1 (上傳檔案插件) 使用記錄

/* 2012.8.8 Maple 撰寫

2012.10.24 Maple 修改*/

官方網址 http://www./

我使用的版本是 v3.1 Flash 版，

相關的介紹就不用了吧...總之是個好用的工具，而且提供的參數也很夠用。

基本使用方式請參考官方文件 http://www./documentation/ ( 網路上也很多中文的入門教學 )

我需要調整按鈕樣式 + 警告視窗模式改用 JQuery 的 dialog + 改成中文訊息

所以就產生了以下的文章了 ( 改了快一整天阿 ... 結果改到一半我就在 Key 這篇文章 ... |||| )

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./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) {}

一直忘記補上程式碼～我將我寫好的程式碼稍微改一下放上來～

01//uploadify的上傳錯誤動作覆寫
02var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {
03    if(errorCode==-280||errorCode==-290)    //使用者自己取消的動作不再跳訊息視窗
04    {
05        return ;    
06    }
07    var msgText = "上傳失敗\n\n";
08    switch(errorCode)
09    {
10        case -200:
11            msgText += "HTTP 錯誤\n"+errorMsg;
12            break;
13        case -210:
14            msgText += "上傳檔案遺失，請重新操作";
15            break;
16        case -230:
17            msgText += "安全性錯誤\n"+errorMsg;
18            break;
19        case -240:
20            msgText += "上傳檔案數量最多 "+this.settings.uploadLimit+" 個";
21            break;
22        case -250:
23            msgText += "上傳失敗\n"+errorMsg;
24            break;
25        case -260:
26            msgText += "找不到指定檔案的ID，請重新操作";
27            break;
28        case -270:
29            msgText += "參數錯誤";
30            break;
31        case -280:
32            msgText += file.name+"\n檔案上傳被取消";
33            break;
34        case -290:
35            msgText += file.name+"\n檔案上傳被停止";
36            break;
37        default:    
38            msgText += "檔案:"+file.name+"\n錯誤代號:"+errorCode+"\n"+errorMsg+"\n"+errorString;
39    }
40    alert(msgText);
41}
42//uploadify的選擇檔案錯誤動作覆寫
43var uploadify_onSelectError = function(file, errorCode, errorMsg) {
44        var msgText = "上傳失敗\n\n";
45        switch(errorCode)
46        {
47            case -100:
48                msgText += "單次上傳的檔案最多 "+this.settings.queueSizeLimit+" 個";
49                break;
50            case -110:
51                msgText += "檔案大小超過限制( "+this.settings.fileSizeLimit+" )";
52                break;
53            case -120:
54                msgText += "檔案大小為 0，不可上傳";
55                break;
56            case -130:
57                msgText += "檔案格式不正確，限 "+this.settings.fileTypeExts;
58                break;
59            default:    
60                msgText += "錯誤代號:"+errorCode+"\n"+errorMsg;
61        }
62        alert(msgText);
63  }
64//uploadify的檔案上傳成功動作覆寫
65var uploadify_onUploadSuccess = function(file, data, response) {    /*成功動作*/
66        alert(file.name + "\n\n" + response + "\n\n" + data);
67}
68 
69var phpsid="PHP的session_id()"; /*這段是用php*/
70//上傳插件的參數設定
71var uploadify_imgConfig = {
72    width : 80,
73    removeTimeout : 1,
74    fileObjName  : 'uploadFile',
75    fileSizeLimit : "20MB",
76    queueSizeLimit: 5,  /*單次上傳最多5個*/
77    successTimeout: 60, /*等待服務器處理文件的時間，默認30s，當超過時，就認為文件已經正確上傳*/
78    queueID  : "uploadifyStatusBox",    /*指定進度條都出現在此div中(id="uploadifyStatusBox")*/
79    swf : "plugin/uploadify/uploadify.swf",
80    uploader : "uploadAction.php",          /*上傳處理*/
81    /*覆寫onDialogClose的原因請看 http://www./forum/#/discussion/8282/alert-box-flash-version/p1 
82    設定後，uploadify的警告視窗都不會跳，所以需要跳訊息的都要設定*/
83    overrideEvents : ['onDialogClose','onUploadSuccess','onUploadError','onSelectError'],
84    onUploadSuccess : uploadify_onUploadSuccess,
85    onUploadError : uploadify_onUploadError,
86    onSelectError : uploadify_onSelectError,
87    buttonText : "新增圖片",
88    /*chrome附檔名只能顯示"自定檔"，但有生效，另外chrome及ff無法遮蔽捷徑檔*/
89    fileTypeExts : "*.gif; *.jpg; *.jpeg; *.png",
90    fileTypeDesc:"圖片檔",
91    /* chrome跟ie9利用Flash送出後還能抓到session，但ff不行，官網說這是flash版的bug
92    官方建議的解決方法 http://www./documentation/uploadify/using-sessions-with-uploadify/  */
93    formData : {"action":"uploadAtt","sid":phpsid}  /*傳遞參數*/
94 
95};
96$("#上傳按鈕id").uploadify(uploadify_imgConfig);