您的位置: 首页  >  文章  >  Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮

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

分类: 文章 • 2024-03-12 23:45:45
  •   Plupload  上传详细讲。
  •   Plupload  多实例上传。
  •   Plupload  多个上传按钮。
  •   Plupload  上传成功获取返回值.

    DEMO:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>Plupload使用指南</title>
    6. <!-- 首先需要引入plupload的源代码 -->
    7. <scriptsrc="js/plupload.full.min.js"></script>
    8. </head>
    9. <body>
    10. <!-- 这里我们只使用最基本的html结构：一个选择文件的按钮，一个开始上传文件的按钮(甚至该按钮也可以不要) -->
    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){
    3. /**
    4. uploader：当前实例的对象，
    5. files：被上传的文件
    6. data：返回值
    7. */
    8. });

    参数没有额定的name ，只有位置。第三个参数是后台返回值。

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

    Plupload多实例上传

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

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

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

    Plupload 上传详细讲解，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=newArray("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");
      3. 

      4. 

    4. $.each(ids,function(i,n){
      5. 

    5. varself=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.www.sojson.com/";
      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. <divclass="regCon
mt15"id="step1"style="display:
block">
      3. 

    3. <divclass="acctitle">身份证验证</div><br>
      4. 

    4. 请上传有效期内的*二代身份证，<br>
      5. 

    5. 请上传小于2M且可以清晰的看到身份证上面的汉字及数字的图片。
      6. 

    6. <divclass="sfzdiv
mt15 clearfix">
      7. 

    7. <divclass="sfzbox
fl">
      8. 

    8. <!--<span
class="sfz-m-t">正面</span>-->
      9. 

    9. <divclass="sfz-img">
      10. 

    10. <!--身份证上传-->
      11. 

    11. <!--身份证通过时-->
      12. 

    12. <imgsrc="pc_images/pcaccount/1.jpg"alt=""id="cardzmbtn-img"style="display:
block;">
      13. 

    13. <divclass="cardzmbtn"id="cardzmbtn">点击上传身份证正面</div>
      14. 

    14. <divclass="sfz-zk"style="display:
none">
      15. 

    15. <pclass="f_12">身份证正面已上传</p>
      16. 

    16. <pclass="f_10"><iclass="sfz-right"></i>审核已通过</p>
      17. 

    17. <pclass="txt-c"><spanclass="a_upagin">重新上传</span></p>
      18. 

    18. </div>
      19. 

    19. </div>
      20. 

    20. </div>
      21. 

    21. <divclass="sfzbox
sfz-fm fr">
      22. 

    22. <!--<span
class="sfz-m-t">背面</span>-->
      23. 

    23. <divclass="sfz-img">
      24. 

    24. <!--身份证未通过时-->
      25. 

    25. <imgsrc="pc_images/pcaccount/2.jpg"alt=""id="cardbmbtn-img"style="display:
block;">
      26. 

    26. <divclass="cardbmbtn"id="cardbmbtn">点击上传身份证背面</div>
      27. 

    27. <divclass="sfz-zk"style="display:
none">
      28. 

    28. <pclass="f_12">身份证背面已上传</p>
      29. 

    29. <pclass="f_10"><iclass="sfz-woring"></i>审核未通过</p>
      30. 

    30. <pclass="txt-c"><spanclass="a_upagin">重新上传</span></p>
      31. 

    31. </div>
      32. 

    32. </div>
      33. 

    33. </div>
      34. 

    34. <!-- 正面省份证
value：全地址，src-data:不带域名的地址-->
      35. 

    35. <inputtype="hidden"id="cardzmbtn-input">
      36. 

    36. <!-- 反面省份证
value：全地址，src-data:不带域名的地址 -->
      37. 

    37. <inputtype="hidden"id="cardbmbtn-input">
      38. 

    38. </div>
      39. 

      40. 

    40. <!--下边框-->
      41. 

    41. <divclass="botton-border
mt50">
      42. 

    42. <ahref="javascript:void
(0);"id="nextStep02"class="a_blue
mt15">下一步</a>
      43. 

    43. </div>
      44. 

    44. <divclass="layer"></div>
      45. 

    45. </div>
      46. 

    
上传的时候选择的是正面身份证上传，结果会把上传的图片显示到正面的位置，并且把地址赋值到<input
type="hidden" id="cardzmbtn-input">  的value 中。反面则一样显示在反面的位置，image路径赋值到<input
type="hidden" id="cardbmbtn-input">  中。有没有上传正反面身份证业务判断就用它来判断即可。

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

															

																					

								

									相关推荐