標籤：問題 檔案選擇 copy order 需求 function parse otto ade
今天幫朋友解決 Plupload 上傳的問題，查了很多資料，資料還是挺全的，但是有點零零散散的，故整理好，合并發出來。
本教程包括：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Plupload使用指南</title> <!-- 首先需要引入plupload的原始碼 --> <script src="js/plupload.full.min.js"></script></head><body> <!-- 這裡我們只使用最基本的html結構：一個選擇檔案的按鈕，一個開始上傳檔案的按鈕(甚至該按鈕也可以不要) --> <p> <button id="browse">選擇檔案</button> <button id="start_upload">開始上傳</button> </p> <script> //執行個體化一個plupload上傳對象 var uploader = new plupload.Uploader({ browse_button : ‘browse‘, //觸發檔案選擇對話方塊的按鈕，為那個元素id url : ‘images/upload.shtml‘, //伺服器端的上傳頁面地址 flash_swf_url : ‘js/Moxie.swf‘, //swf檔案，當需要使用swf方式進行上傳時需要配置該參數 max_file_size: ‘2mb‘,//限制為2MB filters: [{title: "Image files",extensions: "jpg,gif,png"}]//圖片限制 silverlight_xap_url : ‘js/Moxie.xap‘ //silverlight檔案，當需要使用silverlight方式進行上傳時需要配置該參數 }); //在執行個體對象上調用init()方法進行初始化 uploader.init(); //圖片選擇完畢觸發 uploader.bind(‘FilesAdded‘,function(uploader,files){ }); //圖片上傳成功觸發，ps:data是傳回值（第三個參數是傳回值） uploader.bind(‘FileUploaded‘,function(uploader,files,data){ }); //會在檔案上傳過程中不斷觸發，可以用此事件來顯示上傳進度監聽（比如說上傳進度） uploader.bind(‘UploadProgress‘,function(uploader,file){ }); //還有N多呢.....，具體參考連結==>http://www.sojson.com/jc_plupload.html 的各種事件說明。 //最後給"開始上傳"按鈕註冊事件 document.getElementById(‘start_upload‘).onclick = function(){ uploader.start(); //調用執行個體對象的start()方法開始上傳檔案，當然你也可以在其他地方調用該方法 } </script></body></html>
這個代碼是從其他地方copy 過來，我做了些許改動。
這裡要說清楚的是，要掌握 Plupload 上傳，得掌握它的各種事件，事件詳細參考請見http://www.sojson.com/jc_plupload.html 的各種事件說明。
著重講到的是這個事件，成功後背景傳回值，以及 Plupload 的狀態、head資訊。在其他部落格中很少有這個講解。
//圖片上傳成功觸發，ps:data是傳回值（第三個參數是傳回值）uploader.bind(‘FileUploaded‘,function(uploader,files,data){ /** uploader：當前執行個體的對象， files：被上傳的檔案 data：傳回值 */});
參數沒有額定的name ，只有位置。第三個參數是後台傳回值。
好了，說到這裡了，一般的使用沒問題了，有問題參考請見http://www.sojson.com/jc_plupload.html 對Plupload的介紹。
Plupload多執行個體上傳我們經常有需求，一個頁面有多個圖片上傳的地方。
需求1：比如餐廳添加員工，需要上傳身份證，頭像，健康證等等，那就有3個地方。而我們要對3 個圖片上傳一一對應上傳，這時候是寫3遍是肯定可以解決的。
需求2：前提和需求1一樣，但是上傳的觸發方式有多種，比如點擊圖片位置可以上傳，點擊圖片的“上傳按鈕”也可以觸發，如。
點擊身份證圖片可以上傳，點擊“點擊上傳身份證正面”按鈕也可以上傳。
Plupload多執行個體上傳方案一。有的同學知道 Plupload 有一個設定，可以設定為數組。下面代碼的browse_button 欄位可以為數組，即為多個id
var uploader = new plupload.Uploader({ //觸發上傳選擇圖片事件 browse_button : ["cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img"], url : _upload ,//伺服器端的上傳頁面地址 max_file_size: ‘2mb‘,//限制為2MB filters: [{title: "Image files",extensions: "jpg,gif,png"}]//圖片限制});
這裡有一個缺陷就是，如果對對應的上傳圖片按鈕處理不同的回調事件，可能就有點力不從心，我也console.log(uploader) 對象仔細看，沒有觸發上傳的id 元素儲存，要是有就解決了。
我目前就是選用的這種方案，原因是我要對不同的事件做不同的處理，比如上面上傳身份證的案例，我需要上傳正面和反面，上傳成功夠把上傳的圖片賦值到對應的位置。看下代碼：
Javascript 代碼：
//觸發的idvar ids = new Array("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");$.each(ids,function(i,n){ var self = this.toString(); //執行個體化一個plupload上傳對象 var uploader = new plupload.Uploader({ browse_button : self, //觸發檔案選擇對話方塊的按鈕，為那個元素id url : _upload ,//伺服器端的上傳頁面地址 max_file_size: ‘2mb‘,//限制為2MB filters: [{title: "Image files",extensions: "jpg,gif,png"}]//圖片限制 }); //在執行個體對象上調用init()方法進行初始化 uploader.init(); //綁定各種事件，並在事件監聽函數中做你想做的事 uploader.bind(‘FilesAdded‘,function(uploader,files){ uploader.start(); }); uploader.bind(‘FileUploaded‘,function(uploader,files,data){ var imgUrl = "http://cdn.sojson.com/"; //這裡得到圖片的id var id = self.search("-img") == -1?self +"-img":self; console.log("現在在上傳的身份證是：",self.search(‘cardzmbtn‘)==0?‘正‘:‘反‘,"面"); //成功判斷 if(data.status == 200 ){ data = $.parseJSON(data.response); var imagePath = imgUrl + data.file //圖片賦值 document.getElementById(id).src = imagePath; //正面 if(self.search(‘cardzmbtn‘)===0){ $("#cardzmbtn-input").val(imagePath).attr(‘src-data‘,data.file); }else{//反面 $("#cardbmbtn-input").val(imagePath).attr(‘src-data‘,data.file); } } });});
Html 代碼：
<!--身份證上傳--><div class="regCon mt15" id="step1" style="display: block"> <div class="acctitle">身份證驗證</div><br> 請上傳有效期間內的中華人民共和國二代身份證，<br> 請上傳小於2M且可以清晰的看到身份證上面的漢字及數位圖片。 <div class="sfzdiv mt15 clearfix"> <div class="sfzbox fl"> <!--<span class="sfz-m-t">正面</span>--> <div class="sfz-img"> <!--身份證上傳--> <!--身份證通過時--> <img src="pc_images/pcaccount/1.jpg" id="cardzmbtn-img" style="display: block;"> <div class="cardzmbtn" id="cardzmbtn">點擊上傳身份證正面</div> <div class="sfz-zk" style="display: none"> <p class="f_12">身份證正面已上傳</p> <p class="f_10"><i class="sfz-right"></i>審核已通過</p> <p class="txt-c"><span class="a_upagin">重新上傳</span></p> </div> </div> </div> <div class="sfzbox sfz-fm fr" > <!--<span class="sfz-m-t">背面</span>--> <div class="sfz-img"> <!--身份證未通過時--> <img src="pc_images/pcaccount/2.jpg" id="cardbmbtn-img" style="display: block;"> <div class="cardbmbtn" id="cardbmbtn">點擊上傳身份證背面</div> <div class="sfz-zk" style="display: none"> <p class="f_12">身份證背面已上傳</p> <p class="f_10"><i class="sfz-woring"></i>審核未通過</p> <p class="txt-c"><span class="a_upagin">重新上傳</span></p> </div> </div> </div> <!-- 正面省份證 value：全地址，src-data:不帶網域名稱的地址--> <input type="hidden" id="cardzmbtn-input"> <!-- 反面省份證 value：全地址，src-data:不帶網域名稱的地址 --> <input type="hidden" id="cardbmbtn-input"> </div> <!--下邊框--> <div class="botton-border mt50"> <a href="javascript:void (0);" id="nextStep02" class="a_blue mt15">下一步</a> </div> <div class="layer" ></div></div>
上傳的時候選擇的是正面身份證上傳，結果會把上傳的圖片顯示到正面的位置，並且把地址賦值到<input type="hidden" id="cardzmbtn-input"> 的value 中。反面則一樣顯示在反面的位置，image路徑賦值到<input type="hidden" id="cardbmbtn-input"> 中。有沒有上傳正反面身份證業務判斷就用它來判斷即可。
Plupload 上傳詳細講解，Plupload 多執行個體上傳，Plupload多個上傳按鈕--推薦使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
