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的使用心得