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