快捷導(dǎo)航

聊一聊jQuery插件uploadify使用方法

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

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

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

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

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

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

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

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

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

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

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

 'onUploadError': function(file, errorCode, errorMsg, errorString) {
 if(errorCode != -280){//取消上傳的錯(cuò)誤碼是-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,//每次只能選擇一個(gè)文件
 '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處理這個(gè)失敗
 $('#' + opts.fileObjName).uploadify('cancel');
 }
 },
 'onUploadProgress': function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
 opts.showProgress(bytesUploaded/bytesTotal); 
 },
 'onUploadError': function(file, errorCode, errorMsg, errorString) {
 if(errorCode != -280){//取消上傳的錯(cuò)誤碼是-280
 $.dialog.error('上傳失敗，請重試',{txtYes: '我知道了'});
 } 
 },
 'onUploadSuccess': function(file, data) {
 opts.normalUploaded(opts.fileObjName,data);
 }
 });
}

在配置uploadiFive的時(shí)候遇到一個(gè)問題：

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

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

可能還有一個(gè)問題是需要配置'fileType': 'image/*',因?yàn)槲抑苯釉O(shè)置了，不知道不設(shè)置會不會有問題，沒試

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

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

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

<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跨域?qū)е?/span>（flash上傳源碼文件和頁面所在的域不同【靜態(tài)資源現(xiàn)在統(tǒng)一放在static.xxx.com服務(wù)器下】）。我的原因是這個(gè)，我按照網(wǎng)上說的使用在服務(wù)器的根目錄（主域名所在工程的根目錄）下防止了crossdomain.xml，但是很遺憾沒有管用（可能因?yàn)槲覀兪褂玫姆?wù)器不是Apache服務(wù)器吧，網(wǎng)上有童鞋通過這個(gè)方案解決了這個(gè)跨域問題）。最終我的解決方案是不讓其跨域，我將uploadify資源放在了主域名所在工程的根目錄下，然后請求這個(gè)目錄下的uploadify.swf文件。好了，最終終于能夠上傳文件了。

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

您可能感興趣的文章: