當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮

發布時間：2024/3/26 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

??Plupload? 上傳詳細講。
??Plupload? 多實例上傳。
??Plupload? 多個上傳按鈕。
??Plupload? 上傳成功獲取返回值.

DEMO:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Plupload使用指南</title>
<scriptsrc="js/plupload.full.min.js"></script>
</head>
<body>
<p>
<buttonid="browse">選擇文件</button>
<buttonid="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>

這里要說清楚的是，要掌握??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?元素存儲，要是有就解決了。

Plupload多實例上傳方案二。

我目前就是選用的這種方案，原因是我要對不同的事件做不同的處理，比如上面上傳身份證的案例，我需要上傳正面和反面，上傳成功夠把上傳的圖片賦值到對應的位置?？聪麓a：

??Javascript? 代碼：

//觸發的id
var ids=newArray("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");
$.each(ids,function(i,n){
varself=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.www.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);
}
}
});
});

? 代碼：

<divclass="regCon mt15"id="step1"style="display: block">
<divclass="acctitle">身份證驗證</div><br>
請上傳有效期內的中華人民共和國二代身份證，<br>
請上傳小于2M且可以清晰的看到身份證上面的漢字及數字的圖片。
<divclass="sfzdiv mt15 clearfix">
<divclass="sfzbox fl">
<divclass="sfz-img">
<imgsrc="pc_images/pcaccount/1.jpg"alt=""id="cardzmbtn-img"style="display: block;">
<divclass="cardzmbtn"id="cardzmbtn">點擊上傳身份證正面</div>
<divclass="sfz-zk"style="display: none">
<pclass="f_12">身份證正面已上傳</p>
<pclass="f_10"><iclass="sfz-right"></i>審核已通過</p>
<pclass="txt-c"><spanclass="a_upagin">重新上傳</span></p>
</div>
</div>
</div>
<divclass="sfzbox sfz-fm fr">
<divclass="sfz-img">
<imgsrc="pc_images/pcaccount/2.jpg"alt=""id="cardbmbtn-img"style="display: block;">
<divclass="cardbmbtn"id="cardbmbtn">點擊上傳身份證背面</div>
<divclass="sfz-zk"style="display: none">
<pclass="f_12">身份證背面已上傳</p>
<pclass="f_10"><iclass="sfz-woring"></i>審核未通過</p>
<pclass="txt-c"><spanclass="a_upagin">重新上傳</span></p>
</div>
</div>
</div>
<inputtype="hidden"id="cardzmbtn-input">
<inputtype="hidden"id="cardbmbtn-input">
</div>
<divclass="botton-border mt50">
<ahref="javascript:void (0);"id="nextStep02"class="a_blue mt15">下一步</a>
</div>
<divclass="layer"></div>
</div>

上傳的時候選擇的是正面身份證上傳，結果會把上傳的圖片顯示到正面的位置，并且把地址賦值到

? 的value?中。反面則一樣顯示在反面的位置，image路徑賦值到<input type="hidden" id="cardbmbtn-input">? 中。有沒有上傳正反面身份證業務判斷就用它來判斷即可。

總結

以上是生活随笔為你收集整理的Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android标准Glide加载圆形图和
下一篇：关于Typecho的主题魔改记录