coding
在 上篇文章 中介绍了web开发中如何上传单个文件，多文件上传也类似，本文就简单介绍下。本文技术栈为：
前端：HTML / Jquery
后端：Java / SpringMVC / Spring boot
文件上传可以通过 form表单 方式提交到后台，也可以 Ajax 模拟表单方式提交到后台，下边分别演示。
form表单上传
- 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<h1>文件上传示例</h1>
<form method="post" enctype="multipart/form-data" action="/upload-form" >
<input id="file" type="file" name="file" multiple accept="*">
<input type="submit">
</form>
</body>
</html>
- 后端代码：
@Controller
public class UploadController {
@PostMapping("upload-form")
public String upload(@RequestParam("file") MultipartFile[] file) {
for (MultipartFile file : files) {
// todo 将文件保存到服务器
}
return "another-page";
}
}
Ajax方式上传
Ajax方式上传本质上还是模拟表单数据进行提交，这种方式常用在表单中需要上传文件，可以先用Ajax方式上传到服务器，同时从后台返回保存的路径，前台记录此路径，待提交整个表单数据时携带文件路径一起提交到后台保存入库。
- 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<h1>文件上传示例</h1>
<div>
<input id="file1" type="file" name="file1" multiple accept="*">
<input type="button" value="上传" onclick="onUpload()">
</div>
<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script>
function onUpload() {
var formData = new FormData();
var fileCount = $('#file1')[0].files.length;
for(var i = 0; i < fileCount; i++){
formData.append('file1', $('#file1')[0].files[i]);
}
$.ajax({
url: '/upload-ajax',
type: 'POST',
async: false,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (data) {
alert(data);
}
});
}
</script>
</body>
</html>
- 后端代码
@Controller
public class UploadController {
@PostMapping("upload-ajax")
@ResponseBody
public String upload1(@RequestParam("file1") MultipartFile[] file) {
for (MultipartFile file : files) {
// todo 将文件保存到服务器
}
return "success";
}
}
需要注意的地方
- 多文件上传和单文件的区别
| 与单文件上传相比 | 前端 | 后端 |
|---|---|---|
| 多文件上传 | input里多了关键字 multiple | MultipartFile类型变成了数组类型MultipartFile[]
|
- 注意上传文件大小
上传文件如果后台报了这样的错：
org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.,说明文件过大，SpringBoot默认上传文件大小不能超过1MB，可以通过修改properties文件，将阈值调大，例如：
# 单个文件大小限制
spring.http.multipart.max-file-size=20MB
# 总的数据大小限制
spring.http.multipart.max-request-size=100MB
图片源自网络，侵权必删！
网友评论