一、文件的上传
1、前端html上传文件
（1）html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
//使用ajax传输表单内的formdata的文件
$("#upload").click(function () {
var files = document.getElementById("file").files;
//创建FormData对象
var formdata = new FormData();
//设置formdata,追加文件数据
for(var i=0;i<files.length;i++){
console.info(files[i].name);
formdata.append("file", files[i]);
}
$.ajax({
url: 'http://localhost:8080/upload',
type: 'POST',
cache: false,
data: formdata,
//ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
processData: false,
//取消帮我们格式化数据，是什么就是什么
contentType: false,
success:function (res) {
alert(res);
}
});
});
//选择了文件确定后才会触发该事件,将文件名显示到下方
$("#file").change(function () {
console.info("change");
var files = document.getElementById("file").files;
var names="";
for(var i=0;i<files.length;i++){
names+=files[i].name+"<br>"
}
$("#showFileDiv").html(names);
});
})
</script>
</head>
<body>
<!--使用表单提交文件-->
<!-- 可以选择多个文件：multiple="multiple"；accept：设置可选择的文件类型，用“,”分割多种类型 -->
<form id="uploadForm" class="form-inline" enctype="multipart/form-data">
<input id="file" type="file" class="form-control" name="file" multiple="multiple" accept=".pdf,.zip,.xls,.doc,.txt,.png,.jpg "/>
<button id="upload" type="button">upload</button>
</form>
<div id="showFileDiv"></div>
</body>
</html>（2）相比单文件上传,这里主要改了以下几点：
- 1、 对input标签增加属性：
multiple="multiple"；，以支持多文件上传 - 2、 对input标签增加属性：
accept：".pdf,.zip"设置可选择的文件类型，用“,”分割多种类型。实现简单的文件限制。 - 3、上传多个文件后，文件封装添加到formdata中后，还可以追加后台所需要的其他数据，在后台使用对应的键进行接收，示例：
//还可以添加后台所需要的其他数据，在后台方法中使用对应的键值即可接收
formdata.append("title","测试添加标题");
formdata.append("category","测试添加分类");- 4、在使用append方法后，在控制台里只能看到FormData原型，但是对应的键值对已经添加到表单里了，存储的数据并不是以对象属性的方式体现。如果要查看上传的formdata中的数据，可使用以下两种方法：
//查看formdata中的数据
//这种方法只输出键值
for (var value of formdata.values()) {
console.log(value);
}
//这种方法分别输出了键以及键值
for (var [a, b] of formdata.entries()) {
console.log(a, b);
}- 5、选择文件后，将文件名显示到下方，首先添加在html页面中添加
<div id="showFileDiv"></div>,然后使用语句：
//选择了文件确定后才会触发该事件,将文件名显示到下方，其中file为input标签的id
$("#file").change(function () {
console.info("change");
var files = document.getElementById("file").files;
var names="";
for(var i=0;i<files.length;i++){
names+=files[i].name+"<br>"
}
$("#showFileDiv").html(names);
});参考：
FormData 多文件上传input file控件限制上传文件类型
2、springboot后端接收文件
（1）后台代码：
@RequestMapping("/upload")
public String upload(@RequestParam(value="file",required = false) MultipartFile[] files,
HttpServletRequest request,String title,String category)
throws IllegalStateException, IOException {
System.out.println("title:"+title);
System.out.println("category"+category);
System.out.println("length:"+files.length);
// 判断上传的文件是否为空
if (files.length==0) {
throw new RuntimeException("上传失败！上传的文件为空！");
}
File directory = new File("");//设定为当前文件夹
String parentDir=directory.getAbsolutePath()+"\\uploadFile";
File parent = new File(parentDir);
//如果该目录不存在，则使用mkdirs()方法创建多级目录
if (!parent.exists()) {
parent.mkdirs();
}
for (int i = 0; i < files.length; i++) {
// 检查每个文件大小，设置单个文件最大上传大小为10MB
long fileSize = files[i].getSize();
System.out.println("\tsize=" + fileSize);
if (fileSize > 10 * 1024 * 1024) {
throw new RuntimeException("上传失败！上传的文件大小超出了限制！");
}
// 获取原始文件名
String originalFilename = files[i].getOriginalFilename();
System.out.println("\toriginalFilename=" + originalFilename);
// 确定最终保存时使用的文件文件名
String filename = UUID.randomUUID().toString();
String suffix = "";
//拼接文件名后缀
int beginIndex = originalFilename.lastIndexOf(".");
if (beginIndex != -1) {
suffix = originalFilename.substring(beginIndex);
}
// 执行保存文件
File dest = new File(parent, filename + suffix);
files[i].transferTo(dest);
}
return "sucess";
}
（2）有几点需要注意
- 1、springboot默认上传文件大小限制为1M，如果需要修改，在配置文件application.properties中添加如下语句:
#设置单个文件大小为10M限制，总上传的数据大小也为100M
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB- 2、在后端接收上传文件时注意
@RequestParam("file")要和前端ajax中formdata.append("file", files[i]);引号中的名称一致，同时可以接收formdata中的其他参数，如代码中添加的title,category。 - 3、mkdir() 与 mkdirs() 方法的区别：mkdir()是创建子目录，若父目录不存在会创建失败，mkdirs()是创建多级目录,即如果父目录不存在会自动创建。
参考：H5 + input，Formdata，基于springboot多图片与多参数上传前后台交互
3、实现结果截图
html网页前端：
后端控制台：
