天天看點
傳回

Plupload上傳插件詳解，多執行個體上傳 Plupload上傳插件中文幫助文檔

我們來看一個比較全的  Plupload  Demo 

     
  1.  <!DOCTYPE html>            
    2.       
  2.  <html>            
    3.       
  3.  <head>            
    4.       
  4.  <meta charset="UTF-8">            
    5.       
  5.  <title>Plupload使用指南</title>            
    6.       
  6.  <!-- 首先需要引入plupload的源代碼 -->            
    7.       
  7.  <script src="js/plupload.full.min.js"></script>            
    8.       
  8.  </head>            
    9.       
  9.  <body>            
    10.       
  10.  <!-- 這裡我們隻使用最基本的html結構：一個選擇檔案的按鈕，一個開始上傳檔案的按鈕(甚至該按鈕也可以不要) -->            
    11.       
  11.  <p>            
    12.       
  12.  <button id="browse">選擇檔案</button>            
    13.       
  13.  <button id="start_upload">開始上傳</button>            
    14.       
  14.  </p>            
    15.       
  15.  <script>            
    16.       
  16.   
    17.       
  17.  //執行個體化一個plupload上傳對象            
    18.       
  18.  var uploader = new plupload.Uploader({            
    19.       
  19.  browse_button : 'browse', //觸發檔案選擇對話框的按鈕，為那個元素id            
    20.       
  20.  url : 'images/upload.shtml', //伺服器端的上傳頁面位址            
    21.       
  21.  flash_swf_url : 'js/Moxie.swf', //swf檔案，當需要使用swf方式進行上傳時需要配置該參數            
    22.       
  22.  max_file_size: '2mb',//限制為2MB
        filters: [{title: "Image files",extensions: "jpg,gif,png"}]//圖檔限制            
    23.       
  23.  silverlight_xap_url : 'js/Moxie.xap' //silverlight檔案，當需要使用silverlight方式進行上傳時需要配置該參數            
    24.       
  24.  });                
    25.       
  25.   
    26.       
  26.  //在執行個體對象上調用init()方法進行初始化            
    27.       
  27.  uploader.init();            
    28.       
  28.   
    29.       
  29.  //圖檔選擇完畢觸發            
    30.       
  30.  uploader.bind('FilesAdded',function(uploader,files){            
    31.       
  31.   
    32.       
  32.  });            
    33.       
  33.  //圖檔上傳成功觸發，ps:data是傳回值（第三個參數是傳回值）            
    34.       
  34.  uploader.bind('FileUploaded',function(uploader,files,data){            
    35.       
  35.  });            
    36.       
  36.  //會在檔案上傳過程中不斷觸發，可以用此事件來顯示上傳進度監聽（比如說上傳進度）            
    37.       
  37.  uploader.bind('UploadProgress',function(uploader,file){            
    38.       
  38.   
    39.       
  39.  });            
    40.       
  40.  //還有N多呢.....，具體參考連結==>http://www.sojson.com/jc_plupload.html 的各種事件說明。            
    41.       
  41.   
    42.       
  42.  //最後給"開始上傳"按鈕注冊事件            
    43.       
  43.  document.getElementById('start_upload').onclick = function(){            
    44.       
  44.  uploader.start(); //調用執行個體對象的start()方法開始上傳檔案，當然你也可以在其他地方調用該方法            
    45.       
  45.  }            
    46.       
  46.   
    47.       
  47.  </script>            
    48.       
  48.  </body>            
    49.       
  49.  </html>            
    50.

這個代碼是從其他地方

copy

 過來，我做了些許改動。

這裡要說清楚的是，要掌握  Plupload  上傳，得掌握它的各種事件，事件詳細參考請見http://www.sojson.com/jc_plupload.html 的各種事件說明。

着重講到的是這個事件，成功後背景的傳回值，以及  Plupload  的狀态、head資訊。在其他部落格中很少有這個講解。

     
  1.  //圖檔上傳成功觸發，ps:data是傳回值（第三個參數是傳回值）            
    2.       
  2.  uploader.bind('FileUploaded',function(uploader,files,data){            
    3.       
  3.  /**            
    4.       
  4.  uploader：目前執行個體的對象，            
    5.       
  5.  files：被上傳的檔案            
    6.       
  6.  data：傳回值            
    7.       
  7.  */            
    8.       
  8.  });            
    9.

參數沒有額定的

name

 ，隻有位置。第三個參數是背景傳回值。

好了，說到這裡了，一般的使用沒問題了，有問題參考請見http://www.sojson.com/jc_plupload.html 對Plupload的介紹。

Plupload多執行個體上傳

我們經常有需求，一個頁面有多個圖檔上傳的地方。

需求1：比如餐廳添加員工，需要上傳身份證，頭像，健康證等等，那就有3個地方。而我們要對

3

 個圖檔上傳一一對應上傳，這時候是寫3遍是肯定可以解決的。

需求2：前提和需求1一樣，但是上傳的觸發方式有多種，比如點選圖檔位置可以上傳，點選圖檔的“上傳按鈕”也可以觸發，如下圖。

Plupload上傳插件詳解，多執行個體上傳 Plupload上傳插件中文幫助文檔

點選身份證圖檔可以上傳，點選“點選上傳身份證正面”按鈕也可以上傳。

Plupload多執行個體上傳方案一。

有的同學知道  Plupload  有一個設定，可以設定為數組。下面代碼的

browse_button

 字段可以為數組，即為多個

id

 
     
  1.  var uploader = new plupload.Uploader({            
    2.       
  2.  //觸發上傳選擇圖檔事件            
    3.       
  3.  browse_button : ["cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img"],            
    4.       
  4.  url : _upload ,//伺服器端的上傳頁面位址            
    5.       
  5.  max_file_size: '2mb',//限制為2MB            
    6.       
  6.  filters: [{title: "Image files",extensions: "jpg,gif,png"}]//圖檔限制            
    7.       
  7.  });            
    8.

這裡有一個缺陷就是，如果對對應的上傳圖檔按鈕處理不同的回調事件，可能就有點力不從心，我也

console.log(uploader)

 對象仔細看，沒有觸發上傳的

id

 元素存儲，要是有就解決了。

Plupload多執行個體上傳方案二。

我目前就是選用的這種方案，原因是我要對不同的事件做不同的處理，比如上面上傳身份證的案例，我需要上傳正面和反面，上傳成功夠把上傳的圖檔指派到對應的位置。看下代碼：

  Javascript  代碼：

     
  1.  //觸發的id            
    2.       
  2.  var ids = new Array("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");            
    3.       
  3.   
    4.       
  4.  $.each(ids,function(i,n){            
    5.       
  5.  var self = this.toString();            
    6.       
  6.  //執行個體化一個plupload上傳對象            
    7.       
  7.  var uploader = new plupload.Uploader({            
    8.       
  8.  browse_button : self, //觸發檔案選擇對話框的按鈕，為那個元素id            
    9.       
  9.  url : _upload ,//伺服器端的上傳頁面位址            
    10.       
  10.  max_file_size: '2mb',//限制為2MB            
    11.       
  11.  filters: [{title: "Image files",extensions: "jpg,gif,png"}]//圖檔限制            
    12.       
  12.  });            
    13.       
  13.  //在執行個體對象上調用init()方法進行初始化            
    14.       
  14.  uploader.init();            
    15.       
  15.  //綁定各種事件，并在事件監聽函數中做你想做的事            
    16.       
  16.  uploader.bind('FilesAdded',function(uploader,files){            
    17.       
  17.  uploader.start();            
    18.       
  18.  });            
    19.       
  19.  uploader.bind('FileUploaded',function(uploader,files,data){            
    20.       
  20.  var imgUrl = "http://cdn.sojson.com/";            
    21.       
  21.   
    22.       
  22.  //這裡得到圖檔的id            
    23.       
  23.  var id = self.search("-img") == -1?self +"-img":self;            
    24.       
  24.  console.log("現在在上傳的身份證是：",self.search('cardzmbtn')==0?'正':'反',"面");            
    25.       
  25.  //成功判斷            
    26.       
  26.  if(data.status == 200 ){            
    27.       
  27.  data = $.parseJSON(data.response);            
    28.       
  28.  var imagePath = imgUrl + data.file            
    29.       
  29.  //圖檔指派            
    30.       
  30.  document.getElementById(id).src = imagePath;            
    31.       
  31.  //正面            
    32.       
  32.  if(self.search('cardzmbtn')===0){            
    33.       
  33.  $("#cardzmbtn-input").val(imagePath).attr('src-data',data.file);            
    34.       
  34.  }else{//反面            
    35.       
  35.  $("#cardbmbtn-input").val(imagePath).attr('src-data',data.file);            
    36.       
  36.  }            
    37.       
  37.  }            
    38.       
  38.  });            
    39.       
  39.  });            
    40.

  Html  代碼：

     
  1.  <!--身份證上傳-->            
    2.       
  2.  <div class="regCon mt15" id="step1" style="display: block">            
    3.       
  3.  <div class="acctitle">身份證驗證</div><br>            
    4.       
  4.  請上傳有效期内的中華人民共和國二代身份證，<br>            
    5.       
  5.  請上傳小于2M且可以清晰的看到身份證上面的漢字及數字的圖檔。            
    6.       
  6.  <div class="sfzdiv mt15 clearfix">            
    7.       
  7.  <div class="sfzbox fl">            
    8.       
  8.  <!--<span class="sfz-m-t">正面</span>-->            
    9.       
  9.  <div class="sfz-img">            
    10.       
  10.  <!--身份證上傳-->            
    11.       
  11.  <!--身份證通過時-->            
    12.       
  12.  <img src="pc_images/pcaccount/1.jpg" alt="" id="cardzmbtn-img" style="display: block;">            
    13.       
  13.  <div class="cardzmbtn" id="cardzmbtn">點選上傳身份證正面</div>            
    14.       
  14.  <div class="sfz-zk" style="display: none">            
    15.       
  15.  <p class="f_12">身份證正面已上傳</p>            
    16.       
  16.  <p class="f_10"><i class="sfz-right"></i>稽核已認證</p>            
    17.       
  17.  <p class="txt-c"><span class="a_upagin">重新上傳</span></p>            
    18.       
  18.  </div>            
    19.       
  19.  </div>            
    20.       
  20.  </div>            
    21.       
  21.  <div class="sfzbox sfz-fm fr" >            
    22.       
  22.  <!--<span class="sfz-m-t">背面</span>-->            
    23.       
  23.  <div class="sfz-img">            
    24.       
  24.  <!--身份證未通過時-->            
    25.       
  25.  <img src="pc_images/pcaccount/2.jpg" alt="" id="cardbmbtn-img" style="display: block;">            
    26.       
  26.  <div class="cardbmbtn" id="cardbmbtn">點選上傳身份證背面</div>            
    27.       
  27.  <div class="sfz-zk" style="display: none">            
    28.       
  28.  <p class="f_12">身份證背面已上傳</p>            
    29.       
  29.  <p class="f_10"><i class="sfz-woring"></i>稽核未通過</p>            
    30.       
  30.  <p class="txt-c"><span class="a_upagin">重新上傳</span></p>            
    31.       
  31.  </div>            
    32.       
  32.  </div>            
    33.       
  33.  </div>            
    34.       
  34.  <!-- 正面省份證  value：全位址，src-data:不帶域名的位址-->            
    35.       
  35.  <input type="hidden" id="cardzmbtn-input">            
    36.       
  36.  <!-- 反面省份證 value：全位址，src-data:不帶域名的位址 -->            
    37.       
  37.  <input type="hidden" id="cardbmbtn-input">            
    38.       
  38.  </div>            
    39.       
  39.   
    40.       
  40.  <!--下邊框-->            
    41.       
  41.  <div class="botton-border mt50">            
    42.       
  42.  <a href="javascript:void (0);" id="nextStep02" class="a_blue mt15">下一步</a>            
    43.       
  43.  </div>            
    44.       
  44.  <div class="layer" ></div>            
    45.       
  45.  </div>            
    46.

上傳的時候選擇的是正面身份證上傳，結果會把上傳的圖檔顯示到正面的位置，并且把位址指派到

<input type="hidden" id="cardzmbtn-input">

  的

value

 中。反面則一樣顯示在反面的位置，image路徑指派到

<input type="hidden" id="cardbmbtn-input">

  中。有沒有上傳正反面身份證業務判斷就用它來判斷即可。

版權所屬：SO JSON線上解析

原文位址：http://www.sojson.com/blog/214.html

轉載時必須以連結形式注明原始出處及本聲明

Plupload上傳插件中文幫助文檔

http://www.sojson.com/jc_plupload.html

前端設計 plupload 執行個體 插件
上一篇: Plupload 上傳詳細講解，Plupload 多執行個體上傳，Plupload多個上傳按鈕
下一篇: plupload插件限制上傳一個檔案的方法

繼續閱讀