plupload多按钮上传
plupload可以轻松实现拖动、点击上传等功能,但是没有明确说明,多按钮上传方式(不要告诉我复制粘贴改browse_button这种方式)。
下面,我们就来探索这样的功能,初始化一段plupload代码,实现多个上传按钮。
1演示和下载
点击查看演示Demo。
点击这里下载完整代码。
2HTML代码
HTML代码如下:
<div> <div> <inputtype="text"name="pic1"value=""/> <div><imgsrc=""></div> <div> <span></span> <span></span> <span></span> </div> <buttonid="pickfiles1"data-upload-url="upload.php"data-extensions="jpg,png,gif,bmp"data-max-size="10mb"data-base-url="www.awaimai.com">图片1</button> </div> <div> <inputtype="text"name="pic1"value=""/> <div><imgsrc=""></div> <div> <span></span> <span></span> <span></span> </div> <buttonid="pickfiles2"data-upload-url="upload.php"data-extensions="jpg,png,gif,bmp"data-max-size="10mb"data-base-url="www.awaimai.com">图片2</button> </div> <div> <inputtype="text"name="pic1"value=""/> <div><imgsrc=""></div> <div> <span></span> <span></span> <span></span> </div> <buttonid="pickfiles3"data-upload-url="upload.php"data-extensions="jpg,png,gif,bmp"data-max-size="10mb"data-base-url="www.awaimai.com">图片3</button> </div> </div>
添加图片后显示文件名和文件尺寸,上传过程显示进度在percent中,上传完成后把路径填入input,以供提交。
其中,button中有几个属性会传递给plupload,
- id:必须不同。
- class:必须为browse_button,与JS代码对应。
- data-upload-url:服务器处理上传地址。
- data-extensions:允许上传的文件后缀。
- data-max-size:允许上传的最大尺寸。
- data-base-url:图片预览基地址。
3JS代码
首先,引入JQuery和plupload.full.min.js文件,
<scripttype="text/javascript"src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <scripttype="text/javascript"src="./plupload/plupload.full.min.js"></script>
然后初始化plupload:
<scripttype="text/javascript"> varuploaders=[]; varinitUploaders=function(uploaders){ $(".browse_button").each(function(){ self=$(this); varbrowse_button_id=self.attr('id'), base=self.attr('data-base-url'), upload_url=self.attr('data-upload-url'), max_size=self.attr('data-max-size'), file_extensions=self.attr('data-extensions'), input=self.siblings('input'), process=self.siblings('.process'), preview=self.siblings('.preview'); varflash_swf_url='./plupload/Moxie.swf', silverlight_xap_url='./plupload/Moxie.xap'; varuploader=newplupload.Uploader({ runtimes:'html5,flash,silverlight,html4', browse_button:browse_button_id, url:upload_url, flash_swf_url:flash_swf_url, silverlight_xap_url:silverlight_xap_url, filters:{ max_file_size:max_size, mime_types:[ {title:"Imagefiles",extensions:file_extensions} ] }, init:{ PostInit:function(){ }, FilesAdded:function(up,files){ plupload.each(files,function(file){ process.attr('id',file.id).removeClass('none'); process.find('.filename').html(file.name+','); process.find('.filesize').html(plupload.formatSize(file.size)+','); }); up.start(); }, UploadProgress:function(up,file){ process.find('.percent').html(file.percent+'%'); }, FileUploaded:function(up,file,result){ varresponseJson=JSON.parse(result.response); varfilepath=responseJson.result; input.val(filepath); preview.children('img').attr('src',base+filepath); } } }); uploader.init(); uploaders.push(uploader); }); }; initUploaders(uploaders); </script>
每添加一个上传按钮,只需为其添加browse_button的class,就可以了。
参考资料:
- plupload多实例实现
- 关于plupload的使用心得