JSP
<div class="layui-input-block">
<div class="layui-upload">
<button type="button" class="layui-btn" id="adimg">点击添加图片</button>
<div class="layui-upload-list"></div>
</div>
</div>
<input name="id" type="hidden" value="${resultMap.id}">
<div class="layui-form picShow" style="margin-left: 150px;">
<c:choose>
<c:when test="${ resultMap eq null}">
<img src="${ctxjt}/common/images/2018.jpg" name="picpath"
id="imgView"
style="width: 30%; height: 15%; border: 1px solid #CCC;">
</c:when>
<c:otherwise>
<img src="${ctxjt}${resultMap.picpath}" name="picpath"
id="imgView"
style="width: 30%; height: 15%; border: 1px solid #CCC;">
</c:otherwise>
</c:choose>
</div>
JS
//上传图片
var uploadListIns = upload.render({
elem: '#adimg', // 绑定元素
url: ctx + '/upload', // 上传接口
accept: 'file',//指定允许上传的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
multiple: true,//是否允许多文件上传。设置 true即可开启。不支持ie8/9
auto: true,//是否选完文件后自动上传。如果设定 false,那么需要设置 bindAction 参数来指向一个其它按钮提交上传
//bindAction: '#testListAction',//指向一个按钮触发上传,一般配合 auto: false 来使用。
choose: function(obj){ //选择文件后的回调函数。
var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">',
'<td class="filename">'+ file.name +'</td>',
// '<td class="filesize">'+ (file.size/1014).toFixed(1) +'kb</td>',
'<td>等待上传</td>',
'<td>',
'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>',
'<a class="demo-delete"><span style="color: #0000FF;">删除</span></a>',
'</td>',
'<td style="display:none">',
'</td>',
'</tr>'].join(''));
// 单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
// 删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; // 删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; // 清空 input file值,以免删除后出现同名文件不可选
});
});
},
done: function(res, index, upload){
if(res.code == 0){ // 上传成功
var url = ctxjt + res.data.src;
var downPath = ctxa+'/upload/download?filePath='+encodeURIComponent(encodeURIComponent(url));
$("#imgView").attr("src",downPath);
}
this.error(index, upload);
}
});
Controller
String newFileName="";
String fileFullname="";
@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Map<String ,Object> uploadFile(HttpServletRequest request,HttpServletResponse response) throws IOException {
Map<String, Object> result = new HashMap<String, Object>();
Map<String, Object> resultSrc = new HashMap<String, Object>();
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
PrintWriter out = response.getWriter();
String projectName = request.getContextPath();
String outStr = "";
// 文件保存目录路径
String savePath = request.getSession().getServletContext()
.getRealPath("/common/images/uploadFiles/photo/");
response.setContentType("text/html; charset=UTF-8");
/*
// 检查目录
File uploadDir = new File(savePath);
if (!uploadDir.isDirectory()) {
// 如果不存在,创建文件夹
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
String ymd = sdf.format(new Date());
savePath += "/" + ymd + "/";
*/
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
// 此处是直接采用Spring的上传
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
MultipartFile mf = entity.getValue();
fileFullname = mf.getOriginalFilename();
fileFullname = fileFullname.replace('&', 'a');
fileFullname = fileFullname.replace(',', 'b');
fileFullname = fileFullname.replace(',', 'c');
// 扩展名
String fileExt = fileFullname.substring(fileFullname.lastIndexOf(".") + 1).toLowerCase();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
newFileName = df.format(new Date()) + "_"+ new Random().nextInt(1000) + "." + fileExt;
File uploadFile = new File(savePath + "/"+newFileName);
try {
FileCopyUtils.copy(mf.getBytes(), uploadFile);
outStr += projectName + "/common/images/uploadFiles/photo/"+newFileName;
} catch (IOException e) {
result.put("code", 200);
result.put("msg", "上传失败");
e.printStackTrace();
}
}
result.put("code", 0);
result.put("msg", "上传成功");
resultSrc. put("src", outStr);
result.put("data", resultSrc);
return result;
// 上传结束
}
<另>controller中注意更改保存/saveline:
line.setPicpath("/common/images/uploadFiles/photo/"+newFileName);