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/”