說說自己使用uploadify的一波三折的曲折過程：
之所以要選擇uploadify，是源于自己先前使用過jQuery官網(wǎng)的上傳文件插件，比較難用（頁面寫的代碼比較多，IE下后臺(tái)回傳需要配置格式【不清楚其他上傳插件是否也是這樣】），而且一直有IE9上傳不成功的問題，到我離開上家公司的時(shí)候也一直沒有解決這個(gè)問題（可能是本人比較low的原因吧）。所以在使用插件之前先調(diào)研了一下。uploadify提供兩個(gè)版本，flash的uploadify和html5的uploadFive。文檔還是比較齊全的，網(wǎng)上的使用例子頁比較多，配置頁比較簡單，所以第一選擇就是他了。
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上一看，我暈，Firefox最新的版本根本沒有自帶flash插件，結(jié)果就是連file input的樣式都沒有更改，完全沒有作用。先前是想加入一段dom
<object data="xxx.swf" height="0" width="0"></object>
讓瀏覽器檢測到有flash文件彈出安裝flash的提示。后來想一想不行啊，為了上傳個(gè)文件讓用戶去裝flash，太復(fù)雜了。
最后決定判斷讓支持html5的使用uploadiFive上傳，不支持的才使用uploadify（flash）版本上傳。
if(window.applicationCache){//支持html5 在配置uploadify的過程中遇到兩個(gè)問題：
1.file input元素是有name屬性的，但是使用flash后需要手動(dòng)傳遞過去，也就是fileObjName這個(gè)屬性,配置uploadiFive也需要傳遞這個(gè)name。
2.fileSizeLimit設(shè)置文件大小貌似沒有起到作用。最后只能自己驗(yàn)證（onSelect事件中驗(yàn)證），驗(yàn)證失敗也需要自己處理取消上傳（因?yàn)槲沂桥渲昧俗詣?dòng)上傳的'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和$.dialogopts = { 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,/*如果是自動(dòng)上傳,那上傳按鈕將沒用了*/ '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í)際上所有的圖片格式都可以選擇。所以只能在選擇圖片后自己手動(dòng)檢測格式。而且由于onSelect的參數(shù)queue沒有文件類型信息：點(diǎn)擊查看。所以只能在onAddQueueItem事件中檢測，然后在onSelect中取消上傳隊(duì)列queue來取消文件的自動(dòng)上傳
'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è)置會(huì)不會(huì)有問題，沒試
下面是我的uploadiFive配置
/*依賴于jQuery和$.dialogopts = { 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,/*如果是自動(dòng)上傳,那上傳按鈕將沒用了*/ '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); } });}
本地測試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è)置得不一樣。
2.flash跨域?qū)е?/strong>（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的童鞋能夠少走一些彎路。
如果覺得本文不錯(cuò)，請點(diǎn)擊右下方【推薦】！
