webuploader 一个页面多个上传按钮 实现【亲测可用】

第一次使用百度的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+"' />");;
        });
    });

其他附件功能可自己设置哦，原理很简单