<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;}