其實多個文件和單個文件上傳是一樣的，可以使用同一個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配置文件中，小工程就沒有分文件了
測試界面
選擇文件
上傳結果
