第一次使用百度的Webuploader时,为如何实现同一个页面使用多个上传按钮纠结了好一会儿。其实挺简单的,废话不多说,直接上代码:
html按钮代码
<div class="uploaderBtnBox">
<!--用来存放item-->
<div id="fileList1" class="uploader-list"></div>
<div class="filePicker">选择图片</div>
</div>
<div class="imgBox"> </div>
js部分:
$('.filePicker').each(function(index,el){
console.log(index);
var uploader= WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: './js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: 'fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: el,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}
});
uploader.on( 'uploadSuccess', function(file,msg) {
console.log(index+'ok');
$(el).parents('.uploaderBtnBox').siblings('.imgBox').html("<img src='"+msg._raw+"' />");;
});
});
其他附件功能可自己设置哦,原理很简单