其实多个文件和单个文件上传是一样的,可以使用同一个Controller
添加依赖
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.9</version>
</dependency>
<!-- 热启动 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
编写页面
ok页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}" media="all">
<link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" media="all">
<script type="text/javascript" th:src="@{/js/jquery-1.12.4.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}" charset="utf-8"></script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
文件上传
</h3>
</div>
</div>
<div class="container">
<div class=" panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
文件上传结果
</h3>
</div>
<div class="panel-body">
上传成功
</div>
</div>
</div>
</body>
</html>
文件上传页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}" media="all">
<link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" media="all">
<script type="text/javascript" th:src="@{/js/jquery-1.12.4.min.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}" charset="utf-8"></script>
</head>
<body>
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">多文件上传</h3></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-horizontal" action="/file/uploads" enctype="multipart/form-data" method="post">
<div class="form-group">
<div class="input-group col-md-4"><span class="input-group-addon"><i
class="glyphicon glyphicon-upload"></i></span>
<input class="form-control" type="file" name="files" multiple="multiple" placeholder="文件"/>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" class="btn btn-success" id="submitBtn">
<span class="glyphicon glyphicon-share"></span> 上传
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
主要就是文件的上传,使用了表单上传,Post方式请求,使用了bootstrap的多文件上传组件
编写Controller
PageController
@Controller
public class PageController {
@RequestMapping("/{redirect}")
public String redirect(@PathVariable String redirect) {
if(StringUtils.isBlank(redirect)) {
return "index";
}
return redirect;
}
}
FileUploadController
@Controller
@RequestMapping("/file")
public class FileUploadController {
/** 文件保存路径 */
@Value("${fileStorePath}")
private String fileStorePath;
/**
* 上传文件
* @param files 文件对象
* @return 视图ok
* @throws IOException 操作异常
*/
@RequestMapping("/uploads")
public String uploadMoreFiles(@RequestParam("files") MultipartFile ... files) throws IOException {
String fileName;
for (MultipartFile file : files) {
fileName = file.getOriginalFilename();
assert fileName != null;
File targetFile = new File(fileStorePath, fileName);
if (!targetFile.exists()) {
if (targetFile.mkdirs()) {
System.out.println("创建文件成功!");
}
}
file.transferTo(targetFile);
}
return "ok";
}
}
添加配置
yml文件
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
mode: HTML5
encoding: UTF-8
##关闭缓存
cache: false
check-template-location: true
servlet:
content-type: text/html
servlet:
multipart:
max-file-size: 200MB
max-request-size: 250MB
server:
port: 80
properties文件
#热启动
spring.devtools.restart.enabled=true
spring.devtools.restart.additional-paths=src/main/java
#上传文件路径
fileStorePath=d:/file
个人习惯性的将需要修改的属性放在properties配置文件中,小工程就没有分文件了
测试界面
选择文件
上传结果