這中方式是能夠選擇多組圖片進行上傳,並且是異步的形式,雖然選擇的多個圖片,但是卻是一個圖片一個圖片存的,所以後臺方法中寫的是存一個圖片的方法
HTML
<div class="form-group" th:if="${uemiReport ==null || uemiReport.photo==null}">
<input type="hidden" name="photo" class="multiple_show_img" value="">
<div class="layui-upload">
<div class="col-md-2 col-sm-2 col-xs-2" style="text-align: right;">
<button type="button" class="layui-btn" id="multiple_img_upload">報告上傳</button>
</div>
<div class="col-md-10 col-sm-10 col-xs-10">
<blockquote class="layui-elem-quote layui-quote-nm">
<div class="layui-upload-list" id="div-slide_show"></div>
</blockquote>
</div>
</div>
</div>
JS
upPhoto:function () {
var me=this;
var id=$("#reportId").val();
var multiple_images = [];
layui.use('upload', function () {
var upload = layui.upload;
upload.render({
elem: '#multiple_img_upload'
,url: __ctx+'/platform/data/uemiReport/upPhoto?id='+id
,multiple: true
,before: function(obj){
//預讀本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#div-slide_show').append('<img width="100" height="100" src="'+ result +'" alt="'+ file.name
+'" title="點擊刪除" class="layui-upload-img" οndblclick="upPhoto.delPhoto(this)">')
});
}
,done: function(res){
//如果上傳成功
if (res.result==1) {
//追加圖片成功追加文件名至圖片容器
multiple_images.push(res.cause);
$('.multiple_show_img').val(multiple_images);
}else {
//提示信息
DialogUtil.alert(res.message);
}
}
});
});
},
Controller
@RequestMapping("upPhoto")
public void upPhoto(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception {
ResultMessage message=null;
try{
Long reportId = RequestUtil.getLong(request, "id");
MultipartFile file = request.getFile("file");
upPhotoService.savePhoto(file,reportId);
String fileName = file.getOriginalFilename();
File dest = new File(photoPath + fileName);
file.transferTo(dest);
message=new ResultMessage(ResultMessage.Success, "上傳成功");
message.setCause(photoPath + fileName);
}catch(Exception e){
logger.debug(e.getMessage());
message=new ResultMessage(ResultMessage.Fail, "上傳失敗",e.getMessage());
}
writeResultMessage(response.getWriter(), message);
}
service:
@Override
public void savePhoto(MultipartFile file,Long reportId) throws Exception {
try{
String fileName = file.getOriginalFilename();
byte[] bytes = file.getBytes();
UpPhoto upPhoto = new UpPhoto();
//得到文件名
upPhoto.setFileName(fileName.split("\\.")[0]);
long photoId = UniqueIdUtil.genId();
upPhoto.setId(photoId);
//得到文件類型
upPhoto.setFormat(fileName.split("\\.")[1]);
//存入圖片流
upPhoto.setFileStream(bytes);
add(upPhoto);
ReportPhotoRel reportPhotoRel = new ReportPhotoRel();
reportPhotoRel.setId(UniqueIdUtil.genId());
reportPhotoRel.setPhotoId(photoId);
reportPhotoRel.setReportId(reportId);
reportPhotoRelService.add(reportPhotoRel);
}catch(Exception e){
logger.debug(e.getMessage());
}
}