同一个页面使用webuploader实现多实例多上传案例

项目上遇到一个需求，要实现一个页面有多个上传图片入口，我们使用的是webuploader上传组件；
研究了一下终于弄好了这个功能，主要是动态获取上传按钮id和需要展现缩略图的元素id获取元素；保存供以后需要的时候直接用：

1：首先引入所需要的css和js

<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
<script type="text/javascript" src="jQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="webuploader/webuploader.js"></script>

2：html代码：

<div class="container">
	<div class="cerDiv">
		<p class="cer">
			身份证件：
		</p>
		<div id="identity">
		</div>
		<div class="subBut">
			<span onclick="webUpload('identity')" class="uploadImg">上传图片</span>
		</div>
	</div>
	<div class="cerDiv">
		<p class="cer">
			用户头像：
		</p>
		<div id="logo">
		</div>
		<div class="subBut">
			<span onclick="webUpload('logo')" class="uploadImg">上传图片</span>
		</div>
	</div>
	<div class="cerDiv">
		<p class="cer">
			学历证书：
		</p>
		<div id="education">
		</div>
		<div class="subBut">
			<span onclick="webUpload('education')" class="uploadImg">上传图片</span>
		</div>
	</div>
</div>

3：js代码：

<script type="text/javascript">
        /* --上传组件开始-- */
        var $img;
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            server: 'http://public/upload?type=images',
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '.uploadImg',
            duplicate :true,//让图片可重复上传
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            resize:false
        });
 
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('fileQueued', function (file) {
 
            var listId = $list.getAttribute("id");
 
            $("#"+listId).append( '<div id="' + file.id + '" class="item" style="position:relative;float:left;">' +
            '<div class="img" style="height:100px;width:100%;padding:0px;">[外链图片转存失败(img-MUTxpBe1-1562080502333)(https://mp.youkuaiyun.com/mdeditor/94496177)]</div>' +
            '<h4 class="info">' + file.name + '</h4>' + '<input id="imageId" type="hidden" name="imageId" value="' +  file.id  + '" />' +
            '<div class="file-panel" ><a οnclick="remove(this);"><i class="fa fa-trash" style=""></i></a></div>'+
            '</div>' );
 
            $img = $("#"+ file.id).find('img');
 
            // 创建缩略图 如果为非图片文件，可以不用调用此方法 100（宽） x 100（高）  
            uploader.makeThumb( file, function( error, src ) {
                console.log(src);
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, 100, 100 );
 
            $(".webUpload").val(file.name);
        });
 
        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            alert('上传失败');
        });
 
        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            console.log(file);
//            $(".webUpload").removeClass("webUpload");
        });
        var $list;
        function webUpload(id) {
            $list = document.getElementById(id);
            document.getElementById(id).setAttribute("class","webUpload");
        }
 
        function remove(ele){
            var imgEle = $(ele).parent().parent().find("img");
            var imgId = $(imgEle).attr("data-id");
            // 移除缩略图并将上传文件移出上传序列
            var $li = $('#' + imgId);
            $li.off().remove();
            // 重置uploader，目前只重置了文件队列
            uploader.reset();
 
        }
 
    </script>