百度上傳元件web uploader入門

公司的專案需要檔案上傳的功能，之前使用的是SWFUpload這個上傳元件，我將其替換成了web uploader。

SWFUpload元件

SWFUpload 最初是Vinterwebb.se 開發的客戶端檔案上傳工具。它聯合javascript和flash，在瀏覽器中提供一個優於傳統上傳標籤 的功能（和良好的使用者體驗）。

SWFUpload 的主要特性:

檔案瀏覽對話方塊中可以選擇多個檔案
AJAX風格的上傳，不用重重新整理
上傳過程中的各種事件.
可以在客戶端調節圖片大小
它使用的類名稱空間相容各種js庫(i.e., jQuery, Prototype, 等.).
支援 Flash 9 and Flash 10 (2.2.0版本後取消對flash 8的支援)
SWFUpload 的設計理念與其他基於flash的上傳工具不同。SWFUpload 給開發者儘可能多的UI控制能力. 開發者可以使用 XHTML, CSS, JavaScript 來使它更符合自己網站的樣式風格. 它提供一組簡單的js事件更新上傳狀態，開發者可以根據這些事件來在網頁中顯示檔案上傳進度

不過不幸的是 Flash Player 10 迫使我們不得不用一個按鈕（點選後）才能觸發檔案選擇對話方塊，但SWFUpload允許開發者用js來修改這個按鈕的文字等外觀。

從介紹可以看出這個元件是比較老的，主要使用flash來實現上傳，在傳統上傳標籤 無法實現多檔案上傳的時候，他使用flash來實現了。但是新的HTML5中，新加入了multiple屬性，只要就可以直接實現多檔案上傳，此時flash就顯得沒有必要了。

所以經過一些瞭解之後，我選擇了百度的web Uploader這個上傳元件。

百度 web uploader元件

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH執行時，相容IE6+，iOS 6+, android 4+。兩套執行時，同樣的呼叫方式，可供使用者任意選用。
採用大檔案分片併發上傳，極大的提高了檔案上傳效率。

該外掛使用了HTML5的新特性，以傳統的input file 為主，結合flash，使得他在相容性方面有很大的優勢。同時支援移動端上傳，非常強大。

簡單示例和解釋

下面是一個簡單的示例，我詳細做了註釋：

  //初始化Packing list_uploader物件
var Packing_list_uploader = WebUploader.create({
      // swf檔案路徑 
      swf:  'js/webuploader/webuploader-0.1.5/Uploader.swf',
      // 檔案接收服務端。
      server: 'UploadOrderFile.action'
 
,
      // 選擇檔案的按鈕。可選。
      // 內部根據當前執行是建立，可能是input元素，也可能是flash.
      pick: {
        "id":'#packinglist_show_falsh',   
        "multiple":false   //禁止多選。     
      },  

      // 檔案進入佇列後自動開始上傳
      auto: true,
      //分片上傳設定
      chunked:true,  //允許分片
      chunkSize:2*1024*1024, //每片大小2M
      chunkRetry:4,  //分片上傳失敗之後的重試次數
      threads:3,  //上傳併發數。允許同時最大3個上傳程序
      //去重
      duplicate:true,

      //上傳檔案個數限制
      fileNumLimit:20,
      //單個檔案大小限制  20M
      fileSingleSizeLimit:20*1024*1024,
      //傳入檔案格式限制，只能上傳doc,docx,pdf格式的檔案
    accept: {
        title: 'Applications',
        extensions: 'doc,docx,pdf',
        mimeTypes: 'application/pdf, application/msword'
    },         

      //重要引數:跟後臺檔案元件的對接引數，後臺檔案元件叫做upload。
      fileVal:"upload",

      //傳入引數。這兩個引數會跟檔案一起傳給後臺，用於跟後臺對接，確認檔案的來源。
      formData:{
        //這裡的兩個引數是為了跟後臺對接，讓後臺知道上傳的檔案存在哪裡。
          "ttype":"qc_packinglist",
          "task":"createqc"
      },            
  });

上邊的部分就是上傳物件的初始化，我這裡是檔案上傳，跟圖片上傳略有差異，還有其他很多引數，可以去官網查詢API，都寫得很清楚。

由於我實在專案中替換原有的上傳元件，所以不希望改動介面佈局和UI，直接將之前的佈局沿用過來，通過id讓元件和頁面div聯絡起來。
所以我給初始化之後的物件，增加了一系列屬性，屬性值設為HTML中相應部分的標籤id，通過這些id，在事件中編寫相應的函式，可以在不改變介面佈局和UI的前提下替換元件。下面是我增加的屬性和值。

//給Packing list_uploader物件增加我們自己專案所需要的下列屬性：
Packing_list_uploader.bar_id="packing_list_file_panel",        //檔案上傳面板，檔案顯示，進度條，被他包裹在裡邊。       
Packing_list_uploader.full_progress_bar_id="packing_report_bar",     //進度條總長度的div
Packing_list_uploader.percent_bar_id="packing_report_progress_bar",   //進度條width變化的div
Packing_list_uploader.related_var="PackingList",     //realated_var表示相關的變數，在一個<input type="hidden">標籤中，不在網頁中顯示，一般用來傳遞引數。檔案上傳之後value的值變為has，若必填，檢驗value的值是否為空。
Packing_list_uploader.file_link_id="packinglist_file_link",           //檔案上傳成功後在id為 order_link的<a>標籤中顯示檔名，點選可以下載。
Packing_list_uploader.swf_panel_id="packinglist_show_falsh",     //放上傳flash圖示的地方           
Packing_list_uploader.del_panel_id="packinglist_show_delete";    //放刪除flash圖示的地方
//這裡多設定了type和task，是因為我沒法取得web uploader本身的formDate中的ttype和task的值，不然是可以直接用他們的。
Packing_list_uploader.type="qc_packinglist";
Packing_list_uploader.task="createqc";

最後，得到了需要的物件之後，還需要根據web uploader元件自帶的事件來繫結事件函式，得到自己需要的效果。下邊的程式碼是我設定的事件繫結。

//給Packing_list_uploader物件繫結事件和事件函式
//當發生錯誤的時候觸發，判斷錯誤型別，並返回相應的提示。
Packing_list_uploader.on("error",show_error); 
// 當有檔案新增進來的時候，在檔案列表中插入div節點，在網頁中顯示被插入的檔案，包含檔名和等待上傳和移除
Packing_list_uploader.on( 'fileQueued',queued );        
// 檔案上傳過程中建立進度條實時顯示。上傳過程中觸發uploadProgress事件，執行函式：
Packing_list_uploader.on( 'uploadProgress',uploading );
//上傳成功後顯示檔案，切換到刪除鍵等。
Packing_list_uploader.on( 'uploadSuccess',upload_ok );

上邊的程式碼中我綁定了一些事件函式，這些函式我寫在下邊了，也有詳細的註釋。而且可以支援不同的上傳框複用。

//下邊所有的函式，都是需要上傳的時候公用的函式。不同的uploader物件共用的事件繫結函式  和  這些事件繫結函式中需要呼叫的函式。
//發生錯誤時候呼叫的函式
var show_error=function show_error(type){
    if (type=="Q_EXCEED_NUM_LIMIT"){
        alert("此處檔案數量不能大於1個");
    }else if(type=="F_EXCEED_SIZE"){
        alert("此處檔案大小不能大於20M");
    }else if(type=="Q_TYPE_DENIED"){
        alert("此處檔案型別必須是XXX");
    }
};
//檔案進入佇列時呼叫的函式
var queued=function queued( file ) {
    $("#"+this.bar_id).html("");  //將bar_id物件中的內容清空
    var  div='<li><div id="'+this.full_progress_bar_id + '" style="position:relative;width:183px;left:10px;height:8px;display:inline-block;border:1px solid #ccc;list-style:none;margin-top:6px;"><div id="' + this.percent_bar_id +'" style="position:absolute;background-color:#F36861;width:0%;height:8px"></div></div></li>';
    $("#"+this.bar_id).append( div);   //加入顯示進度條所需的div
};
//檔案上傳過程中呼叫的函式
var uploading=function( file, percentage ) {
    $("#"+this.percent_bar_id).css( 'width', percentage * 100 + '%');      
};
//檔案上傳成功後呼叫的函式
var upload_ok=function( file ) {     //上傳成功時觸發uploadSuccess函式，將之前的  上傳中  再替換為   已上傳。
    //呼叫GetFileList函式，該函式下邊
    GetFileList(this.type, this.task, this.bar_id, this.related_var,100, this.file_link_id);
    //$("#"+this.related_var).next().find("label").remove();//清除上傳檔案提示
    $("#" + this.swf_panel_id).hide();     //上傳成功後隱藏上傳的flash按鈕     
    $("#" + this.del_panel_id).show();     //上傳成功後顯示刪除檔案的flash按鈕  
    //取出對應例項    的引數
    var type = this.type;
    var task = this.task;
    var swf_panel_id = this.swf_panel_id;
    var del_panel_id = this.del_panel_id;
    var file_link_id = this.file_link_id;
    var related_var = this.related_var; 
    $("#" + this.del_panel_id).click(function(){   //給  刪除檔案的flash按鈕的  click事件繫結    刪除上傳的檔案    的函式
        //切換回到上傳檔案的狀態。      該函式在下邊。
        removeUploadFile(type, task, swf_panel_id, file_link_id, del_panel_id);
        $("#" + related_var ).val("");
    });
};
//下面是一些上邊的呼叫函式中需要呼叫的函式：
//取得上傳成功的檔案，通過該檔案製作一個用於點選下載的<a>標籤，放入檔案上傳的地方。
function GetFileList( ty,task, divname,varname, max_len, f_id )
{
    var url = 'GetFileList.action';
    var params = {"type":ty, "task":task };
    $.ajax({
        url:url,
        type:"POST",
        data:params,
        dataType:"json",
        success:function (data){
            var storeObj = document.getElementById(divname);  
            var t=storeObj.childNodes.length;
            for(var i=t-1;i>=0;i--)
            {
                storeObj.removeChild(storeObj.childNodes[i]);
            }
            for(var i = 0 ; i <data.list.length; i ++)
            {
                var li= document.createElement("li");
                var filename =  data.list[i].filename;
                if( max_len != null && max_len !=undefined && max_len != 'undefined' ){

                }
                //上傳成功後顯示檔名字（若太長則顯示一部分+省略號...+副檔名），可下載的連結。
                li.innerHTML="<a id='"+ f_id + "' href='Download.action?fileid=" + data.list[i].fid+ "' title='" + filename + "'>"+decreaseString(filename,20,true)+" </a>";
                storeObj.appendChild(li);
            } 
            if( data.list.length > 0 )
            {
                var  vv = document.getElementById(varname);
                if( vv != null )
                    vv.value = "has";
            }
        }
    });
}
//根據傳入的引數type,task跟後臺通訊定位檔案，刪除成功，那麼使用上邊的switch_delete函式重新切換到上傳檔案的狀態。
function  removeUploadFile( type, task, swf_panel_id, swf_filebar_id, del_panel_id ){
    var url = 'RemoveUploadFile.action';    //通訊刪除動作
    var params = {"type":type, "task":task };
    $.ajax({
        url:url,
        type:"POST",
        data:params,
        dataType:"json",
        success:function(jdata){
            if( jdata.result=="success"){   //判斷刪除是否成功。
                //刪除成功後重新切換到上傳檔案。
                switch_delete(swf_panel_id, del_panel_id, swf_filebar_id);
            }
        },
    });
}
//（點選刪除檔案後）重新切換到上傳檔案
function switch_delete( flash_id, delete_id, fileplace_id ){    
    $("#" + flash_id).show();      //顯示上傳檔案的按鈕
    $("#" + delete_id ).hide();       //隱藏刪除檔案的按鈕
    $("#" + fileplace_id ).replaceWith("<li style='text-align:center;color:#BDC3C7;font-size:13px;'>Upload you document</li>");   //將顯示區域的內容替換為上傳提示
}