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
图片源自网络, 侵权必删!
来源: http://www.jianshu.com/p/24d1cc68cbd6