WebUploader 上传，仿淘宝宝贝发布

<div class="m-upload-group">
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                    <div class="upload-group-item">
                        <div class="upload-group-item-add">
                            <i class="ifont ifont-jia"></i>
                            <div class="upload-group-item-text">宝贝图</div>
                        </div>
                    </div>
                </div>

<script type="text/javascript" charset="utf-8" src="${staticSite}/jui/plugins/webuploader/webuploader.js"></script>

var uploader = WebUploader.create({
    auto: true,
    // swf文件路径
    swf: '/js/third-party/webuploader/Uploader.swf',
    // 文件接收服务端。
    server: '/api/product/imgUpload',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '.upload-group-item',
    fileSingleSizeLimit: 1024*1024*4,//4MB
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function(file,n) {
});
uploader.on( 'uploadSuccess', function(file, data) {
    if(data.state == "ERROR"){
        alert("上传失败");
        return;
    }
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<div class="info">' + file.name + '</div>' +
            '<img class="preview" />' +
            '</div>'
    ),
    $img = $li.find('img');
    $("#rt_"+file.getSource().ruid).css("zIndex",5);
    var $fileContainer = $("#rt_"+file.getSource().ruid).parent();
    $fileContainer.find(".file-item").remove();
    $fileContainer.append($li);


    var $file = $("#" + file.id);
    var $fileContainer = $file.parent();
    $file.find(".preview").attr( 'src', data.url);
    $fileContainer.find(".upload-group-option").remove();
    var $option = $('<div class="upload-group-option"><i class="ifont ifont-backwardfill"></i><i class="ifont ifont-shanchu"></i><i class="ifont ifont-forwardfill"></i></div>');
    $fileContainer.append($option);

    //移动位置
    var $left = $option.find(".ifont-backwardfill"), $right = $option.find(".ifont-forwardfill");
    $left.click(function(){
        var $prev = $fileContainer.prev();
        if($prev.length > 0){
            $fileContainer.insertBefore($prev);
        }
    });
    $right.click(function(){
        var $next = $fileContainer.next();
        if($next.length > 0){
            $next.insertBefore($fileContainer);
        }
    });

    //删除
    var $del = $option.find(".ifont-shanchu");
    $del.click(function(){
        $file.remove();
        $fileContainer.find(".upload-group-option").remove();
    });
});
uploader.on( 'uploadError', function( file ) {
    alert("上传错误");
});

.webuploader-container {
	position: relative;
}
.webuploader-element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
	position: relative;
	display: inline-block;
	cursor: pointer;
	/*background: #00b7ee;*/
	/*padding: 10px 15px;*/
	/*color: #fff;*/
	text-align: center;
	border-radius: 3px;
	overflow: hidden;
}
.webuploader-pick-hover {
	/*background: #00a2d4;*/
}

.webuploader-pick-disable {
	opacity: 0.6;
	pointer-events:none;
}

.m-upload-group .ifont-jia {font-size:50px;position:relative;top:40px;}
.upload-group-item {display:inline-block;text-align: center;border:1px solid #DAD8D8;cursor: pointer;}
.upload-group-item:hover {border:1px solid #2d2d2d}
.upload-group-item .webuploader-pick{width:130px;height:130px;}
.upload-group-item .preview{width:100%;height:80px;}
.upload-group-item .file-item{position:absolute;z-index:1;top:0px;left:0px;width: 100%;height:100%;cursor: default}
.upload-group-item-text {position:absolute; bottom:0px;text-align: center;width: 100%;height:30px;line-height: 30px;}

.upload-group-option {width:100%;position:absolute;z-index:10;bottom:0px;left:0px;background: #fff}
.upload-group-option .ifont-backwardfill,
.upload-group-option .ifont-forwardfill,
.upload-group-option .ifont-shanchu{cursor: pointer;z-index: 10;}
.upload-group-option .ifont-backwardfill:hover,
.upload-group-option .ifont-forwardfill:hover,
.upload-group-option .ifont-shanchu:hover{color:#2d2d2d;font-weight: bold}
.upload-group-option .ifont-backwardfill{position:absolute;left:5px;}
.upload-group-option .ifont-forwardfill{position:absolute;right:5px;}

/**
	 * 上传文件
	 * @param multipartRequest
	 */
	@ResponseBody
	@RequestMapping(value = "/api/product/imgUpload")
	public Map imgUpload(MultipartHttpServletRequest multipartRequest) {
		String uid = "2016040710704843";
		if("webapp".equals(userFilePath)){
			userFilePath = multipartRequest.getServletContext().getRealPath("/");
		}
		FileUploadResponse fileUploadResponse = //上传部分自由实现

		Map<String, Object> resultMap = new HashMap<>();
		resultMap.put("url", fileUploadResponse.getFileInfo().getFilePath());
		resultMap.put("fileType", fileUploadResponse.getFileInfo().getFileType());
		resultMap.put("original", fileUploadResponse.getFileInfo().getFileName());
		if(fileUploadResponse.getStatus().equals("failt")){
			resultMap.put("state", "ERROR");
		}
		resultMap.put("state", "SUCCESS");
		return resultMap;
	}