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

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

一、使用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。

二、使用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了，

以上便是我的填坑過程，相信很多人都會遇到，特此分享！

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

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

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

原創文章，轉載請注明來自一個蘿卜一個坑  -博客園[http://www.cnblogs.com/luozhihao]

本文地址：http://www.cnblogs.com/luozhihao/p/4959771.html