使用挂载盘上传图片，实现无刷新效果
前端：
<!DOCTYPE html> <html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"> <!-- 清理浏览器缓存 --> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="-1"> <link rel="stylesheet" href="/css/bootstrap.min.css"> </head> <body class="gray-bg"> <style type="text/css"> ul li{ list-style: none; margin:10px; } </style> <div class="container"> <div style="padding-top: 40px;" class="wrapper wrapper-content ui-layout-center"> <input class="form-control gray-bg" type="test" th:value="${msg}" style="border: 0px; color: red; height: 35px; font-size: 32px; background-color: transparent;"> <form id="file-upload" class="form-inline" style="height: 600px;" action="/system/imgsupload/uploadFiles" method="post" enctype="multipart/form-data"> <div class="container"> <div class="page-header"> <h1> <font color="#FF0000">*</font> 首页轮换图片管理 </h1> </div> <ul class="container" > <li> 第一张：<input type="file" class="form-control" name="file" id="file1" onchange="checkFile('file1')" multiple /> </li> <li> 第二张：<input type="file" class="form-control" name="file" id="file2" onchange="checkFile('file2')" multiple /> </li> <li> 第三张：<input type="file" class="form-control" name="file" id="file3" onchange="checkFile('file3')" multiple /> </li> <li> 第四张：<input type="file" class="form-control" name="file" id="file4" onchange="checkFile('file4')" multiple /> </li> <li> 第五张：<input type="file" class="form-control" name="file" id="file5" onchange="checkFile('file5')" multiple /> </li> <li><div class="file-loading" > <input type="submit" class="btn btn-success" th:value="上传" onclick="check()"/> <button type="reset" class="btn btn-primary" onchange="reset()">重置</button></div> </li> </ul> <br/> <div class="form-group"> <br> <h3>当前首页轮换图:</h3> <img src="/imgUpload/1.jpg" style="height: 200px; width: 220px" class="img-rounded"> <img src="/imgUpload/2.jpg" style="height: 200px; width: 220px" class="img-rounded"> <img src="/imgUpload/3.jpg" style="height: 200px; width: 220px" class="img-rounded"> <img src="/imgUpload/4.jpg" style="height: 200px; width: 220px" class="img-rounded"> <img src="/imgUpload/5.jpg" style="height: 200px; width: 220px" class="img-rounded"> </div> </div> </form> </div> </div> <script type="text/javascript"> //重置 function reset(){ document.getElementByName('file').value =''; } //校验文件 function checkFile(ids){ var file = document.getElementById(ids); //校验类型 var fileName = file.value; var type = fileName.substring(fileName.indexOf(".")); if(type != ".jpg"){ alert("请上传.jpg格式文件！"); document.getElementById(ids).value =''; return false; } //校验大小 var size = file.files[0].size; if(size > 1024*1024*8){ alert("请上传8M以内大小的图片"); return false; }else if(size <= 0){ alert("图片大小不能为0M！"); return false; } }; //点击上传之前校验 function check(){ var fileName = document.getElementById('files').value; if(fileName ==''){ alert("请选择上传图片"); return false; } } </script> </body> </html>
后端：
1、在拦截器中配置
//不用拦截图片路径，用于首页登录背景图的切换
filterChainDefinitionMap.put("/imgUpload/**", "anon");
2、实现挂载盘
@Configuration public class InterceptorConfig implements WebMvcConfigurer { // 配置虚拟映射路径 @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/imgUpload/**").addResourceLocations("file:E:/imgUpload/"); } @Override public void configurePathMatch(PathMatchConfigurer configurer) { // TODO Auto-generated method stub } ...（因为继承了WebMvcConfigurer接口，所以它里面的方法都有实现，空实现即可）
3.实现上传
@Controller @RequestMapping("/system/imgsupload") public class ImgsUploadController { private String prefix = "system/imgupload"; /**返回上传页面*/ @RequiresPermissions("system:imgsupload:view") @GetMapping() public String initupload(){ return prefix + "/imgsupload"; } /**多张图片上传*/ @Log(title = "系统管理", module = "首页轮播图片管理", action = "图片上传") @RequestMapping(value = "uploadFiles", method = RequestMethod.POST) public String uploadFiles(HttpServletRequest request, MultipartFile[] file, Model model){ //文件上传 String[] fileName ={"1","2","3","4","5"}; int count = 0; //分别给上传成功的文件指明下标命名 int page = 0; //记录上传成功的图片数 try { for(MultipartFile mf : file){ if(!mf.isEmpty()){ //获取文件类型名 String fileType =FilenameUtils.getExtension(mf.getOriginalFilename()); //把文件上传至本地的挂载盘中 String filepath = "D:/imgUpload/"; System.out.println(filepath + fileName[count] + "." + fileType); File savefile = new File(filepath + fileName[count] + "." + fileType); //如果指定路径目录不存在，则创建一个 if (!savefile.getParentFile().exists()) { savefile.getParentFile().mkdirs(); } mf.transferTo(savefile); page ++; } count++; } model.addAttribute("msg", page+"张图片上传成功!"); } catch (Exception e) { model.addAttribute("msg", "上传失败，请重新上传或者联系管理员！"); } return prefix + "/imgsupload"; } }
