最近項目中需要實現多文件上傳功能，於是結合需求最終選擇了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了，修改后的源碼我放到了我的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/