聊一聊jQuery插件uploadify使用方法

更新時間：2016年08月24日 15:51:18 作者：chua1989

聊一聊jQuery插件uploadify使用方法，這篇文章主要總結了uploadify使用的一些經(jīng)驗，感興趣的小伙伴們可以參考一下

說說自己使用uploadify的一波三折的曲折過程：

之所以要選擇uploadify，是源于自己先前使用過jQuery官網(wǎng)的上傳文件插件，比較難用（頁面寫的代碼比較多，IE下后臺回傳需要配置格式【不清楚其他上傳插件是否也是這樣】），而且一直有IE9上傳不成功的問題，到我離開上家公司的時候也一直沒有解決這個問題（可能是本人比較low的原因吧）。所以在使用插件之前先調研了一下。uploadify提供兩個版本，flash的uploadify和html5的uploadFive。文檔還是比較齊全的，網(wǎng)上的使用例子頁比較多，配置頁比較簡單，所以第一選擇就是他了。

1.初體驗
uploadify的flash版本免費，而且根據(jù)以往的經(jīng)驗所有瀏覽器都支持flash的（這是悲劇的開始），所以計劃只使用這個版本就行。
產(chǎn)品給的效果如下（有三個圖片預覽框，每一張圖片有對應的描述，所以不能用一個上傳按鈕，每一個上傳按鈕上傳對應的圖片）

配置完畢后chrome自測通過（中間有個小曲折，產(chǎn)品那邊想要多張圖片一起上傳，當時沒有找到IE8展示的處理。后面再網(wǎng)上找到了一篇，然后錄了下來圖片上傳前預覽）。

要測試各個瀏覽器的情況，在Firefox上一看，我暈，F(xiàn)irefox最新的版本根本沒有自帶flash插件，結果就是連file input的樣式都沒有更改，完全沒有作用。先前是想加入一段dom

讓瀏覽器檢測到有flash文件彈出安裝flash的提示。后來想一想不行啊，為了上傳個文件讓用戶去裝flash，太復雜了。

最后決定判斷讓支持html5的使用uploadiFive上傳，不支持的才使用uploadify（flash）版本上傳。
if(window.applicationCache){//支持html5
在配置uploadify的過程中遇到兩個問題：
1.file input元素是有name屬性的，但是使用flash后需要手動傳遞過去，也就是fileObjName這個屬性,配置uploadiFive也需要傳遞這個name。
2.fileSizeLimit設置文件大小貌似沒有起到作用。最后只能自己驗證（onSelect事件中驗證），驗證失敗也需要自己處理取消上傳（因為我是配置了自動上傳的'auto': true）

 //swf上傳需要在onUploadError處理這個失敗
$('#' + opts.fileObjName).uploadify('cancel');

執(zhí)行取消后還需要在onUploadError事件中截取這個取消事件導致觸發(fā)視為onUploadError事件

 'onUploadError': function(file, errorCode, errorMsg, errorString) {
 if(errorCode != -280){//取消上傳的錯誤碼是-280
 $.dialog.error('上傳失敗，請重試',{txtYes: '我知道了'});
 } 
 }

下面是我的uploadify的配置

/*
依賴于jQuery和$.dialog
opts = {
 fileObjName:'idCardPositive',
 swf: 'uploadify/uploadify.swf',
 showProgress: function(progress){},//progress:0-1
 checkFile: function(file){},
 normalOnSelect: function(){},
 normalUploaded: function(id,data),
 positionClass: 'file-btn-left',
}
*/
function init(opts){
 var maxSize = 5242880;//1024 * 1024 * 5,5M
 $('#' + opts.fileObjName).uploadify({
 'fileSizeLimit ': maxSize,
 'multi': false,//每次只能選擇一個文件
 'auto': true,/*如果是自動上傳,那上傳按鈕將沒用了*/
 'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png',
 'fileTypeDesc': '請選擇圖像或者視頻',
 'queueID': 'fileQueue',
 'width': 200,
 'height': 140,
 'buttonText': '',
 'fileObjName': opts.fileObjName,//需要修改文件名稱
 'swf': opts.swf,
 'uploader': '/pcapi/user/uploadUserChangeCardImage.htm',
 'onSelect' : function(file) {
 //有name表示是swf格式文件上傳，html5文件上傳參數(shù)請參考http://www.uploadify.com/documentation/uploadifive/onselect-2/
 //需要檢測文件類型和大小
 if(opts.checkFile(file)){
 opts.normalOnSelect(opts.positionClass);
 }else{
 //swf上傳需要在onUploadError處理這個失敗
 $('#' + opts.fileObjName).uploadify('cancel');
 }
 },
 'onUploadProgress': function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
 opts.showProgress(bytesUploaded/bytesTotal); 
 },
 'onUploadError': function(file, errorCode, errorMsg, errorString) {
 if(errorCode != -280){//取消上傳的錯誤碼是-280
 $.dialog.error('上傳失敗，請重試',{txtYes: '我知道了'});
 } 
 },
 'onUploadSuccess': function(file, data) {
 opts.normalUploaded(opts.fileObjName,data);
 }
 });
}

在配置uploadiFive的時候遇到一個問題：

1.fileTypeExts設置為“*.jpg;*.bmp;*.jpeg;*.png”，但實際上所有的圖片格式都可以選擇。所以只能在選擇圖片后自己手動檢測格式。而且由于onSelect的參數(shù)queue沒有文件類型信息：點擊查看。所以只能在onAddQueueItem事件中檢測，然后在onSelect中取消上傳隊列queue來取消文件的自動上傳

 'onAddQueueItem': function(file) {//html5需要自己檢測格式和大小
 fileCheckResult = opts.checkFile(file);
 },
 'onSelect' : function(queue) {
 if(fileCheckResult){
 opts.normalOnSelect(opts.positionClass);
 }else{
 $('#' + opts.fileObjName).uploadifive('clearQueue');
 }
 },

可能還有一個問題是需要配置'fileType': 'image/*',因為我直接設置了，不知道不設置會不會有問題，沒試

下面是我的uploadiFive配置

/*
依賴于jQuery和$.dialog
opts = {
 fileObjName:'idCardPositive',//name和id相同
 showProgress: function(progress){},//progress:0-1
 checkFile: function(file){},
 normalOnSelect: function(positionClass){},
 normalUploaded: function(id,data),
 positionClass: 'file-btn-left',
}
*/
function init(opts){
 var fileCheckResult = true;
 var maxSize = 5242880;//1024 * 1024 * 5,5M
 $('#' + opts.fileObjName).uploadifive({
 'fileSizeLimit ': maxSize,
 'multi': false,//每次只能選擇一個文件
 'auto': true,/*如果是自動上傳,那上傳按鈕將沒用了*/
 'fileTypeExts': '*.jpg;*.bmp;*.jpeg;*.png',
 'fileTypeDesc': '請選擇圖像或者視頻',
 'queueID': 'fileQueue',
 'width': 200,
 'height': 140,
 'buttonText': '',
 'fileObjName': opts.fileObjName,//需要修改文件名稱
 'dnd': false,//不允許拖拽
 'fileType': 'image/*',
 'uploadScript': '/pcapi/user/uploadUserChangeCardImage.htm',
 'onAddQueueItem': function(file) {//html5需要自己檢測格式和大小
 fileCheckResult = opts.checkFile(file);
 },
 'onSelect' : function(queue) {
 if(fileCheckResult){
 opts.normalOnSelect(opts.positionClass);
 }else{
 $('#' + opts.fileObjName).uploadifive('clearQueue');
 }
 },
 'onProgress': function(file, e) {
 opts.showProgress(e.loaded / e.total);
 },
 'onError': function(file, errorCode, errorMsg, errorString) {
 $.dialog.error('上傳失敗，請重試',{txtYes: '我知道了'});
 },
 'onUploadComplete': function(file, data) {
 opts.normalUploaded(opts.fileObjName,data);
 }
 });
}

2.當頭棒喝
本地測試OK以后，放到測試環(huán)境上去測試，馬上被震驚了。
遇到的第一個問題就是在IE下很多時候點擊沒有反應（沒有彈出文件選擇框），找了半天原因終于找到了：必須在文檔準備完全的時候再去初始化uploadify，而且確保上傳input是可用的（非display：none）
好了，可以選擇文件了，但是選擇文件以后IE8/9總是拋出call to startUpload failed異常，去網(wǎng)上查了一下，主要有幾個原因

1）.而是可能有多個上傳的div或者input（含有相同的name或者ID）導致的，如果有兩個不同的上傳按鈕，那么他們的name,id要設置得不一樣。

這個不是什么tab的問題，而是可能有多個上傳的div或者input（含有相同的name或者ID）導致的
如果有兩個不同的上傳按鈕，那么他們的name,id要設置得不一樣。

<div id='total'> 
 <input type="file" name="total_upload" id="total_upload" multiple="true" />
</div> 
<a href="javascript:$('#total_upload').uploadify('upload', '*')">開始上傳</a> 
<a href="javascript:$('#total_upload').uploadify('cancel', '*')">全部取消上傳</a>

2）.flash跨域導致（flash上傳源碼文件和頁面所在的域不同【靜態(tài)資源現(xiàn)在統(tǒng)一放在static.xxx.com服務器下】）。我的原因是這個，我按照網(wǎng)上說的使用在服務器的根目錄（主域名所在工程的根目錄）下防止了crossdomain.xml，但是很遺憾沒有管用（可能因為我們使用的服務器不是Apache服務器吧，網(wǎng)上有童鞋通過這個方案解決了這個跨域問題）。最終我的解決方案是不讓其跨域，我將uploadify資源放在了主域名所在工程的根目錄下，然后請求這個目錄下的uploadify.swf文件。好了，最終終于能夠上傳文件了。

最終是解決了上傳的問題，花費的時間也不少，記錄下來，希望后面有用uploadify的童鞋能夠少走一些彎路。

您可能感興趣的文章: