最近項(xiàng)目中需要實(shí)現(xiàn)多文件上傳功能，于是結(jié)合需求最終選擇了Uploadify這一款控件來實(shí)現(xiàn)。相比其他控件，Uploadify具有簡潔的界面，功能API基本可以解決大多數(shù)需求，又是基于jquery的，配置起來相對容易。但是不用不知道，一用起來發(fā)現(xiàn)坑還是蠻多了，相信大部分用過的人都會遇到，下面就來分享下我的填坑過程：
根據(jù)官網(wǎng)文檔配置好我所需要的前端配置項(xiàng)，再讓后臺同事把對應(yīng)的后臺配置搞定后，在chrome下嘗試了下一些ok。心想這樣就大工告成了？呵呵。。。那么問題來了。
一、使用Uploadify
（1）、chrome報(bào)錯
按F12打開調(diào)試面板刷新頁面后會顯示如下錯誤信息：
這是啥？請求了3次失敗了2次最后成功了1次，后來發(fā)現(xiàn)只有chrome下會報(bào)這個錯誤，大概是因?yàn)閏hrome對于swf文件的安全性措施導(dǎo)致的，因?yàn)椴挥绊懝δ埽瑫簳r(shí)沒去管它。
（2）、發(fā)現(xiàn)火狐上失效
當(dāng)我打開火狐的時(shí)候，突然發(fā)現(xiàn)按鈕失效，就是一個type='file'的按鈕，只能單文件上傳，原因很簡單，那便是火狐檢測不到我的flash。而Uploadify是一款利用flash來實(shí)現(xiàn)多文件上傳功能，這對沒有安裝flash的用戶來說無疑根本沒法用。
好吧，但是我選擇先忍了，因?yàn)殚_發(fā)的是一款后臺應(yīng)用，給自己人用的，所以大不了讓他們安裝下flash，使用chrome瀏覽器來訪問好了。
（3）、文件上傳完畢后會自動消失
根據(jù)項(xiàng)目需求，文件上傳完畢后仍然留在頁面上，并顯示相應(yīng)信息。然而Uploadify默認(rèn)上傳成功后會自動刪除頁面上的文件。這個問題解決起來很簡單，有相應(yīng)的API來實(shí)現(xiàn)：
1 $("#file_upload").uploadify({2 'removeCompleted' : false,3 'swf' : '/uploadify/uploadify.swf',4 'uploader' : '/uploadify/uploadify.php' 5 });
將removeCompleted設(shè)置為false即可。如果需要將上傳失敗的文件也保留在頁面上，可以設(shè)置'removeTimeout' 的值無限制大，這樣不用設(shè)置removeCompleted也行。
（4）上傳完畢文件無法清除
如果保留上傳完畢文件，那么呵呵了，文件不會因?yàn)槟阌|發(fā)cancel方法而清除，即使頁面上清除了，等你再選擇已經(jīng)上傳完的文件后，會顯示提示你文件已存在，是否覆蓋的彈框。
百度許久后發(fā)現(xiàn)這是一個公認(rèn)的bug，暫時(shí)沒有很好的解決方案。于是我再也忍不住了，果斷舍棄flash版本的Uploadify，換用其html5版本的UploadiFive。
二、使用UploadiFive
然而自從換了UploadiFive后，心情果斷舒暢了很多，之前（1）（2）（3）（4）中的問題蕩然無存了，心想這不是逼我們購買付費(fèi)版嘛。。。
但是UploadiFive卻拋棄了Uploadify中的一些功能：
(1)無未上傳文件重復(fù)提示
Uploadify中添加同名文件會提示是否覆蓋，而UploadiFive卻是直接覆蓋，沒有提示信息?？梢越邮堋?/p>
(2)上傳完畢后進(jìn)度條消失
Uploadify中上傳完畢會默認(rèn)保留進(jìn)度條并顯示100%，前提設(shè)置removeCompleted為false，而UploadiFive中上傳完畢后進(jìn)度條自動消失。勉強(qiáng)接受。
(3)無自動檢測文件大小功能
Uploadify中選擇文件加入隊(duì)列后，會在文件名后自動加上該文件的大小，而UploadiFive卻沒有該功能，這不是故意為難我們嗎......假裝接受不了。于是開始研究其源代碼。
1個多小時(shí)后解決了這個問題。
下面是解決方案：
首先UploadiFive的js文件是壓縮過的，最好還原其源代碼，在sublime text3中安裝HTML-CSS-JS Prettify插件后利用快捷鍵shift+alt+H 可快速實(shí)現(xiàn)js格式化。
格式化后找到j(luò)query.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+')'); /*以上添加文件大小檢測*/
同時(shí)找到$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上，需要的童鞋請?jiān)L問：https://github.com/luozhihao/uploadifive
以上便是我的填坑過程，相信很多人都會遇到，特此分享！
同時(shí)在這里推薦另外兩款實(shí)用的多文件上傳控件，根據(jù)項(xiàng)目需求使用：
a、jQuery File Upload 官網(wǎng)：http://blueimp.github.com/jQuery-File-Upload/
b、百度的Web Uploader 官網(wǎng)：http://fex.baidu.com/webuploader/
原創(chuàng)文章，轉(zhuǎn)載請注明來自一個蘿卜一個坑 -博客園[http://www.cnblogs.com/luozhihao]
本文地址：http://www.cnblogs.com/luozhihao/p/4959771.html
微信公眾號“前端呼啦圈”（Love-FED）
