WebUploader 多图片上传

1、效果如下

2、下载WebUploader
3、在视图里放入一个容器，如下：
// 此处是数据校验 判断是否可以进行页面提交

	<tr>
	<td align="right">
		<label class="Validform_label">
			<font style="color: red;">*</font>多图片:
		</label>
	</td>
	<td class="value">
		 <fieldset>
			<div id="uploader" class="wu-example">
			    <!--用来存放文件信息-->
			    <div class="btns">
				<div class="cp_img_jia" id="filePicker">选择文件</div>
				// restrictedFormat 为上传图片的格式要求 由后台传入
				<div style="line-height: 41px;height: 41px;color: #999;" >&nbsp;${restrictedFormat}</div>
			    </div>
			    <div id="thelistDetail" class="uploader-list" >
			    // 因为是多图片 图片显示路径此处为list
				<c:if test="${fn:length(fileList)>0}">
					    <c:forEach items="${fileList}" var="fl">
						<div id="" class="file-item thumbnail" style="width:120px;float: left;">
								 <img src="${fl.normalcoverimgall}" style="width: 100px;height: 100px;">
							 </div>
					    </c:forEach>
				</c:if>
				<c:if test="${fn:length(fileList)==0}">
					
				</c:if>
			    </div>
			</div>
		 </fieldset>
		 <span class="Validform_checktip" id="fileDetail"></span>
	</td>
</tr>

4、JS初始化WebUploader

// 图片上传路径
var urlc= '<%=basePath%>/systemController/***.do';
var BASE_URL="<%=basePath%>";
// 保存图片路径
var PhotoUrlArray = new Array();
var $ = jQuery,
  $list = $('#thelistDetail'),
  // Web Uploader实例
  uploaderDetail;
$(function () {
	uploaderDetail = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        disableGlobalDnd: true,
     	// swf文件路径
        swf: BASE_URL+'/plug-in/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: urlc,
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        //只允许选择图片
        accept: {
        	 title: 'Images',
             extensions: '${validationInformation}',
             mimeTypes: 'image/jpg,image/jpeg,image/png'
        },
        thumb: {
            type: 'image/jpg,jpeg,png'
        },
        //指明参数名称，后台也用这个参数接收文件
        duplicate: false,
        fileSingleSizeLimit: ${maxsize},
        fileNumLimit:100,
        method: 'POST',
        //每次上传附带参数 供后台进行判断 如果项目中有很多上传图片的地方用此公共方法即可
        formData:{"isup":"1","bizType":"haidianDetail"}
    });

    // 当有文件添加进来的时候
    uploaderDetail.on('fileQueued', function (file) {
        var $li = $(
                '<div id="' + file.id + '" class="cp_img" style="width:120px;float: left;">' +
                    '<img></div>'
                ),
            $img = $li.find('img');
        // $list为容器jQuery实例
        $list.append($li);

        // 创建缩略图 
 		var limitwidth = 368;
		var limitheight = 463;
		uploaderDetail.makeThumb(file, function (error, src) {
        	imgWidth = file._info.width;
            imgHeight = file._info.height;
            if(limitwidth!=imgWidth || imgHeight!=limitheight){
             	$("#fileDetail").attr("class","Validform_checktip Validform_wrong");
             	$("#fileDetail").text("文件的像素不符合标准!");
             	$("#filecheckDetail").val("0");
             	setTimeout(function() {
             		$("#"+file.id).remove();
    			},1000);
             }else{
             	$("#fileDetail").attr("class","Validform_checktip Validform_right");
             	$("#fileDetail").text("通过信息验证！");
             	$("#filecheckDetail").val("1");
             }
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr('src', src);
        }, 100, 100);//100x100为缩略图尺寸
    });

    // 文件上传过程中创建进度条实时显示。
    uploaderDetail.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li)
                    .find('span');
        }
        $percent.css('width', percentage * 100 + '%');
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploaderDetail.on('uploadSuccess', function (file, response) {
    	 $('#' + file.id).addClass('upload-state-done');
         //将上传的url保存到数组
         PhotoUrlArray.push(new PhotoUrl(response.id, response.filePath));
    });

    // 文件上传失败，显示上传出错。
    uploaderDetail.on('uploadError', function (file) {
        var $li = $('#' + file.id),
            $error = $li.find('div.error');

        // 避免重复创建
        if (!$error.length) {
            $error = $('<div class="error"></div>').appendTo($li);
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploaderDetail.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').remove();
    });

    //所有文件上传完毕
    uploaderDetail.on("uploadFinished", function ()
    {
    });//显示删除按钮
    $(".cp_img").live("mouseover", function ()
    {
        $(this).children(".cp_img_jian").css('display', 'block');

    });
    //隐藏删除按钮
    $(".cp_img").live("mouseout", function () {
        $(this).children(".cp_img_jian").css('display', 'none');

    });
    //执行删除方法
    $list.on("click", ".cp_img_jian", function ()
    {

        var Id = $(this).parent().attr("id");
        //删除该图片
        uploaderDetail.removeFile(uploader.getFile(Id, true));
        for (var i = 0; i < PhotoUrlArray.length; i++) {
            if (PhotoUrlArray[i].id == Id) {
                PhotoUrlArray.remove(i);
            }
    	}
        $(this).parent().remove();
    });
});


	//保存从后台返回的图片url
function PhotoUrl(id, filePath) {
    this.id = id;
    this.filePath = filePath;
}

5、后台保存图片，返回路径