1.编写文件上传的表单页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动态添加文件上传列表</title><link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet"><script th:src="@{/login/js/jquery.min.js}"></script>
</head>
<body><div th:if="${uploadStatus}" style="color: red" th:text="${uploadStatus}">上传成功</div><form th:action="@{/uploadFile}" method="post" enctype="multipart/form-data">上传文件: <input type="button" value="添加文件" onclick="add()"/><div id="file" style="margin-top: 10px;" th:value="文件上传区域"></div><input id="submit" type="submit" value="上传"style="display: none;margin-top: 10px;"/></form><script type="text/javascript">// 动态添加上传按钮function add(){var innerdiv = "<div>";innerdiv += "<input type='file' name='fileUpload' required='required'>" +
"<input type='button' value='删除' onclick='remove(this)'>";innerdiv +="</div>";$("#file").append(innerdiv);// 打开上传按钮$("#submit").css("display","block");}// 删除当前行<div>function remove(obj) {$(obj).parent().remove();if($("#file div").length ==0){$("#submit").css("display","none");}}</script>
</body>
</html>2.引入jQuery
3.在全局配置文件中添加文件上传的相关配置
# 单个上传文件大小限制（默认1MB）
spring.servlet.multipart.max-file-size=10MB
# 总上传文件大小限制（默认10MB）
spring.servlet.multipart.max-request-size=50MB4.进行文件上传处理实现文件上传功能
//toUpload()方法处理路径为“/toUpload”的GET请求，向文件上传页面//upload.html跳转；
@GetMapping("/toUpload")
public String toUpload(){return "upload";}/*uploadFile()方法处理路径为“/uploadFile”的POST请求，对上传文件进行处理。文件上传处理过程中，对文件名进行重命名并存放在“F:/file/”目录下，并封装了返回结果。其中，处理上传文件的请求方法中，使用了“MultipartFile[] fileUpload”参数处理单个或多个上传文件（也可以使用单列集合参数），fileUpload参数名必须与upload.html页面中上传文件<input>框中的name属性值一致。*/
@PostMapping("/uploadFile")public String uploadFile(MultipartFile[] fileUpload, Model model) {// 默认文件上传成功，并返回状态信息model.addAttribute("uploadStatus", "上传成功！");for (MultipartFile file : fileUpload) {// 获取文件名以及后缀名String fileName = file.getOriginalFilename();// 重新生成文件名（根据具体情况生成对应文件名）fileName = UUID.randomUUID()+"_"+fileName;// 指定上传文件本地存储目录，不存在需要提前创建String dirPath = "F:/file/";File filePath = new File(dirPath);if(!filePath.exists()){filePath.mkdirs();}try {file.transferTo(new File(dirPath+fileName));} catch (Exception e) {e.printStackTrace();// 上传失败，返回失败信息model.addAttribute("uploadStatus","上传失败： "+e.getMessage());}}// 携带上传状态信息回调到文件上传页面return "upload";}5.效果测试
-
在浏览器上访问http://localhost:8080/toUpload，效果如下：
如果不能正常解析模板页面，那么
a.添加NekoHTML依赖（一个简单地HTML扫描器和标签补偿器）
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
b.在全局配置文件上添加如下配置
#thymeleaf对html的标签约束非常严格，所有的标签必须有开有闭，比如#<br></br>或者<br/>是可以的，但是<br>会报错，配置#spring.thymeleaf.mode=LEGACYHTML5 目的就是为了解决这个问题，可以使页面#松校验。
spring.thymeleaf.mode=LEGACYHTML5
- 点击【添加文件】，添加几个文件
- 验证文件上传处理效果，查看定制的上传文件存储目录“F:/file/”
