使用Uploadify(UploadiFive)多文件上傳控件遇到的坑

最近項目中須要實現多文件上傳功能，因而結合需求最終選擇了Uploadify這一款控件來實現。相比其餘控件，Uploadify具備簡潔的界面，功能API基本能夠解決大多數需求，又是基於jquery的，配置起來相對容易。可是不用不知道，一用起來發現坑仍是蠻多了，相信大部分用過的人都會遇到，下面就來分享下個人填坑過程：

根據官網文檔配置好我所須要的前端配置項，再讓後臺同事把對應的後臺配置搞定後，在chrome下嘗試了下一些ok。心想這樣就大工告成了？呵呵。。。那麼問題來了。

 

1、使用Uploadify

（1）、chrome報錯

按F12打開調試面板刷新頁面後會顯示以下錯誤信息：

這是啥？請求了3次失敗了2次最後成功了1次，後來發現只有chrome下會報這個錯誤，大概是由於chrome對於swf文件的安全性措施致使的，由於不影響功能，暫時沒去管它。

 

（2）、發現火狐上失效

當我打開火狐的時候，忽然發現按鈕失效，就是一個type='file'的按鈕，只能單文件上傳，緣由很簡單，那即是火狐檢測不到個人flash。而Uploadify是一款利用flash來實現多文件上傳功能，這對沒有安裝flash的用戶來講無疑根本無法用。

好吧，可是我選擇先忍了，由於開發的是一款後臺應用，給本身人用的，因此大不了讓他們安裝下flash，使用chrome瀏覽器來訪問好了。

 

（3）、文件上傳完畢後會自動消失

根據項目需求，文件上傳完畢後仍然留在頁面上，並顯示相應信息。然而Uploadify默認上傳成功後會自動刪除頁面上的文件。這個問題解決起來很簡單，有相應的API來實現：

1 $("#file_upload").uploadify({
2         'removeCompleted' : false,
3         'swf'             : '/uploadify/uploadify.swf',
4         'uploader'        : '/uploadify/uploadify.php' 
5 });

將removeCompleted設置爲false便可。若是須要將上傳失敗的文件也保留在頁面上，能夠設置'removeTimeout' 的值無限制大，這樣不用設置removeCompleted也行。

 

（4）上傳完畢文件沒法清除

若是保留上傳完畢文件，那麼呵呵了，文件不會由於你觸發cancel方法而清除，即便頁面上清除了，等你再選擇已經上傳完的文件後，會顯示提示你文件已存在，是否覆蓋的彈框。

百度許久後發現這是一個公認的bug，暫時沒有很好的解決方案。因而我再也忍不住了，果斷捨棄flash版本的Uploadify，換用其html5版本的UploadiFive。

 

2、使用UploadiFive

然而自從換了UploadiFive後，心情果斷舒暢了不少，以前（1）（2）（3）（4）中的問題蕩然無存了，心想這不是逼咱們購買付費版嘛。。。

 

可是UploadiFive卻拋棄了Uploadify中的一些功能：

(1)無未上傳文件重複提示

Uploadify中添加同名文件會提示是否覆蓋，而UploadiFive倒是直接覆蓋，沒有提示信息。能夠接受。

 

(2)上傳完畢後進度條消失

Uploadify中上傳完畢會默認保留進度條並顯示100%，前提設置removeCompleted爲false，而UploadiFive中上傳完畢後進度條自動消失。勉強接受。

 

(3)無自動檢測文件大小功能

Uploadify中選擇文件加入隊列後，會在文件名後自動加上該文件的大小，而UploadiFive卻沒有該功能，這不是故意爲難咱們嗎......僞裝接受不了。因而開始研究其源代碼。

1個多小時後解決了這個問題。

下面是解決方案：

首先UploadiFive的js文件是壓縮過的，最好還原其源代碼，在sublime text3中安裝HTML-CSS-JS Prettify插件後利用快捷鍵shift+alt+H 可快速實現js格式化。

格式化後找到jquery.uploadifive.js中的$data.addQueueItem方法，在

file.queueItem.find('.filename').html(fileName)後添加

/*如下添加文件大小檢測*/
var fileSize = Math.round(file.size / 1024);
var suffix = 'KB';
if (fileSize > 1000) {
    fileSize = Math.round(fileSize / 1000);
    suffix = 'MB';
}
var fileSizeParts = fileSize.toString().split('.');
fileSize = fileSizeParts[0];
if (fileSizeParts.length > 1) {
    fileSize += '.' + fileSizeParts[1].substr(0, 2);
}
fileSize += suffix;
file.queueItem.find('.filesize').html('('+fileSize+')');
 /*以上添加文件大小檢測*/

同時找到$data.queueItem，在其中添加<span class="filesize"></span>

if (settings.itemTemplate == false) {
   $data.queueItem = $('<div class="uploadifive-queue-item">\
           <a class="close" href="#">X</a>\
           <div><span class="filename"></span><span class="filesize"></span><span class="fileinfo"></span></div>\
            <div class="progress">\
                    <div class="progress-bar"></div>\
             </div>\
     </div>');
} else {
   $data.queueItem = $(settings.itemTemplate);
}

這樣就ok了，修改後的源碼我放到了個人github上，須要的童鞋請訪問：https://github.com/luozhihao/uploadifive

以上即是個人填坑過程，相信不少人都會遇到，特此分享！

同時在這裏推薦另外兩款實用的多文件上傳控件，根據項目需求使用：

a、jQuery File Upload  官網：http://blueimp.github.com/jQuery-File-Upload/

b、百度的Web Uploader  官網：http://fex.baidu.com/webuploader/