uploadify使用的一些經驗總結

說說本身使用uploadify的一波三折的曲折過程：

　　之因此要選擇uploadify，是源於本身先前使用過jQuery官網的上傳文件插件，比較難用（頁面寫的代碼比較多，IE下後臺回傳須要配置格式【不清楚其餘上傳插件是否也是這樣】），並且一直有IE9上傳不成功的問題，到我離開上家公司的時候也一直沒有解決這個問題（多是本人比較low的緣由吧）。因此在使用插件以前先調研了一下。uploadify提供兩個版本，flash的uploadify和html5的uploadFive。文檔仍是比較齊全的，網上的使用例子頁比較多，配置頁比較簡單，因此第一選擇就是他了。

 

1.初體驗

　　uploadify的flash版本免費，並且根據以往的經驗全部瀏覽器都支持flash的（這是悲劇的開始），因此計劃只使用這個版本就行。

　　產品給的效果以下（有三個圖片預覽框，每一張圖片有對應的描述，因此不能用一個上傳按鈕，每個上傳按鈕上傳對應的圖片）

　　

 

　　配置完畢後chrome自測經過（中間有個小曲折，產品那邊想要多張圖片一塊兒上傳，當時沒有找到IE8展現的處理。後面再網上找到了一篇，而後錄了下來圖片上傳前預覽）。

　　要測試各個瀏覽器的狀況，在Firefox上一看，我暈，Firefox最新的版本根本沒有自帶flash插件，結果就是連file input的樣式都沒有更改，徹底沒有做用。先前是想加入一段dom

<object data="xxx.swf"  height="0" width="0"></object>

　　讓瀏覽器檢測到有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');

 

　　執行取消後還須要在onUploadError事件中截取這個取消事件致使觸發視爲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文件上傳參數請參考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的參數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之後，放到測試環境上去測試，立刻被震驚了。

　　遇到的第一個問題就是在IE下不少時候點擊沒有反應（沒有彈出文件選擇框），找了半天緣由終於找到了：必須在文檔準備徹底的時候再去初始化uploadify，並且確保上傳input是可用的（非display：none）

　　好了，能夠選擇文件了，可是選擇文件之後IE8/9老是拋出call to startUpload failed異常，去網上查了一下，主要有幾個緣由

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

　　2.flash跨域致使（flash上傳源碼文件和頁面所在的域不一樣【靜態資源如今統一放在static.xxx.com服務器下】）。個人緣由是這個，我按照網上說的使用在服務器的根目錄（主域名所在工程的根目錄）下防止了crossdomain.xml，可是很遺憾沒有管用（可能由於咱們使用的服務器不是Apache服務器吧，網上有童鞋經過這個方案解決了這個跨域問題）。最終個人解決方案是不讓其跨域，我將uploadify資源放在了主域名所在工程的根目錄下，而後請求這個目錄下的uploadify.swf文件。好了，最終終於可以上傳文件了。

 

 　　最終是解決了上傳的問題，花費的時間也很多，記錄下來，但願後面有用uploadify的童鞋可以少走一些彎路。

 

　　若是以爲本文不錯，請點擊右下方【推薦】！