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

2023-06-30 16:26:05

Plupload 上传详细讲。
Plupload 多实例上传。
Plupload 多个上传按钮。
Plupload 上传成功获取返回值.

DEMO:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <title>Plupload使用指南</title>
6. 
7. <scriptsrc="js/plupload.full.min.js"></script>
8. </head>
9. <body>
10. 
11. <p>
12. <buttonid="browse">选择文件</button>
13. <buttonid="start_upload">开始上传</button>
14. </p>
15. <script>
17. //实例化一个plupload上传对象
18. var uploader =new plupload.Uploader({
19. browse_button:'browse',//触发文件选择对话框的按钮，为那个元素id
20. url:'images/upload.shtml',//服务器端的上传页面地址
21. flash_swf_url:'js/Moxie.swf',//swf文件，当需要使用swf方式进行上传时需要配置该参数
22. max_file_size:'2mb',//限制为2MB filters:[{title:"Image files",extensions:"jpg,gif,png"}]//图片限制
23. silverlight_xap_url:'js/Moxie.xap'//silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
24. });
26. //在实例对象上调用init()方法进行初始化
27. uploader.init();
29. //图片选择完毕触发
30. uploader.bind('FilesAdded',function(uploader,files){
32. });
33. //图片上传成功触发，ps:data是返回值（第三个参数是返回值）
34. uploader.bind('FileUploaded',function(uploader,files,data){
35. });
36. //会在文件上传过程中不断触发，可以用此事件来显示上传进度监听（比如说上传进度）
37. uploader.bind('UploadProgress',function(uploader,file){
39. });
40. //还有N多呢.....，具体参考链接==>http://www.sojson.com/jc_plupload.html 的各种事件说明。
42. //最后给"开始上传"按钮注册事件
43. document.getElementById('start_upload').onclick=function(){
44. uploader.start();//调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
45. }
47. </script>
48. </body>
49. </html>
这里要说清楚的是，要掌握 Plupload 上传，得掌握它的各种事件，事件详细参考请见http://www.sojson.com/jc_plupload.html 的各种事件说明。

着重讲到的是这个事件，成功后后台的返回值，以及 Plupload 的状态、head信息。在其他博客中很少有这个讲解。
1. //图片上传成功触发，ps:data是返回值（第三个参数是返回值）
2. uploader.bind('FileUploaded',function(uploader,files,data){
4. });
参数没有额定的 name
，只有位置。第三个参数是后台返回值。

好了，说到这里了，一般的使用没问题了，有问题参考请见http://www.sojson.com/jc_plupload.html 对Plupload的介绍。

Plupload多实例上传

我们经常有需求，一个页面有多个图片上传的地方。

需求1：比如餐厅添加员工，需要上传身份证，头像，健康证等等，那就有3个地方。而我们要对
3
个图片上传一一对应上传，这时候是写3遍是肯定可以解决的。

需求2：前提和需求1一样，但是上传的触发方式有多种，比如点击图片位置可以上传，点击图片的“上传按钮”也可以触发，如下图。

Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮
点击身份证图片可以上传，点击“点击上传身份证正面”按钮也可以上传。
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多实例上传方案二。

我目前就是选用的这种方案，原因是我要对不同的事件做不同的处理，比如上面上传身份证的案例，我需要上传正面和反面，上传成功够把上传的图片赋值到对应的位置。看下代码：

Javascript 代码：
1. //触发的id
2. var ids=newArray("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");
4. $.each(ids,function(i,n){
5. varself=this.toString();
6. //实例化一个plupload上传对象
7. var uploader =new plupload.Uploader({
8. browse_button:self,//触发文件选择对话框的按钮，为那个元素id
9. url: _upload,//服务器端的上传页面地址
10. max_file_size:'2mb',//限制为2MB
11. filters:[{title:"Image files",extensions:"jpg,gif,png"}]//图片限制
12. });
13. //在实例对象上调用init()方法进行初始化
14. uploader.init();
15. //绑定各种事件，并在事件监听函数中做你想做的事
16. uploader.bind('FilesAdded',function(uploader,files){
17. uploader.start();
18. });
19. uploader.bind('FileUploaded',function(uploader,files,data){
20. var imgUrl ="http://cdn.www.sojson.com/";
22. //这里得到图片的id
23. var id =self.search("-img")==-1?self+"-img":self;
24. console.log("现在在上传的身份证是：",self.search('cardzmbtn')==0?'正':'反',"面");
25. //成功判断
26. if(data.status==200){
27. data= $.parseJSON(data.response);
28. var imagePath = imgUrl+ data.file
29. //图片赋值
30. document.getElementById(id).src= imagePath;
31. //正面
32. if(self.search('cardzmbtn')===0){
33. $("#cardzmbtn-input").val(imagePath).attr('src-data',data.file);
34. }else{//反面
35. $("#cardbmbtn-input").val(imagePath).attr('src-data',data.file);
36. }
37. }
38. });
39. });
Html 代码：
1. 
2. <divclass="regCon mt15"id="step1"style="display: block">
3. <divclass="acctitle">身份证验证</div><br>
4. 请上传有效期内的中华人民共和国二代身份证，<br>
5. 请上传小于2M且可以清晰的看到身份证上面的汉字及数字的图片。
6. <divclass="sfzdiv mt15 clearfix">
7. <divclass="sfzbox fl">
8. 
9. <divclass="sfz-img">
10. 
11. 
12. <imgsrc="pc_images/pcaccount/1.jpg"alt=""id="cardzmbtn-img"style="display: block;">
13. <divclass="cardzmbtn"id="cardzmbtn">点击上传身份证正面</div>
14. <divclass="sfz-zk"style="display: none">
15. <pclass="f_12">身份证正面已上传</p>
16. <pclass="f_10"><iclass="sfz-right"></i>审核已通过</p>
17. <pclass="txt-c"><spanclass="a_upagin">重新上传</span></p>
18. </div>
19. </div>
20. </div>
21. <divclass="sfzbox sfz-fm fr">
22. 
23. <divclass="sfz-img">
24. 
25. <imgsrc="pc_images/pcaccount/2.jpg"alt=""id="cardbmbtn-img"style="display: block;">
26. <divclass="cardbmbtn"id="cardbmbtn">点击上传身份证背面</div>
27. <divclass="sfz-zk"style="display: none">
28. <pclass="f_12">身份证背面已上传</p>
29. <pclass="f_10"><iclass="sfz-woring"></i>审核未通过</p>
30. <pclass="txt-c"><spanclass="a_upagin">重新上传</span></p>
31. </div>
32. </div>
33. </div>
34. 
35. <inputtype="hidden"id="cardzmbtn-input">
36. 
37. <inputtype="hidden"id="cardbmbtn-input">
38. </div>
40. 
41. <divclass="botton-border mt50">
42. <ahref="javascript:void (0);"id="nextStep02"class="a_blue mt15">下一步</a>
43. </div>
44. <divclass="layer"></div>
45. </div>
上传的时候选择的是正面身份证上传，结果会把上传的图片显示到正面的位置，并且把地址赋值到 <input type="hidden" id="cardzmbtn-input"> 的 value 中。反面则一样显示在反面的位置，image路径赋值到 <input type="hidden" id="cardbmbtn-input">
中。有没有上传正反面身份证业务判断就用它来判断即可。

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

js插件 plupload

上一篇: java websocket 302_java – WebSocket握手期间出错：意外的响应代码：302

下一篇: Plupload上传插件详解，多实例上传 Plupload上传插件中文帮助文档

继续阅读