Ajax上传文件 --SpringBoot
程序员文章站
2022-06-03 08:51:43
...
运用ajax对文件进行异步的上传，本次后台用到的是Java的SpringBoot+Theamleaf
首先是前端，这里我写了一个简单的前端界面
下面展示一些 内联代码片。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="fileId" type="file" name="file">
<button onclick="uploadFile()">上传</button>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
function uploadFile() {
var elementById = document.getElementById("fileId");
var files = elementById.files;
var file = files[0];
var formDate = new FormData();
formDate.append("file",file);
$.ajax({
url:'/test',
dataType:'json',
type:'POST',
processData: false,
contentType: false,
async: false,
data:formDate,
complete:function (res) {
console.log(res)
}
})
}
</script>
</html>
注意：
1、这里要注意的一点是processData一定要设置为false，要不然会报错。错误内容如下图
processData默认为true，为true时，提交不会序列化data。
2、contentType: false,这一条也要设置上，这是为了让前端自己匹配所需要的请求头。而不是使用默认的。如果没有配置而使用了默认的请求头，后台就会报如下错误
前台大概就是那些，接下来是后台代码
@RequestMapping(value = "/test")
@ResponseBody
public String test(@RequestParam("file") MultipartFile file) throws IOException {
byte[] bytes = file.getBytes();
String name = file.getOriginalFilename();
return "上传成功";
}
后台没有什么太多要设置的地方，就是使用MultipartFile 类来接收就好了。
至此，文件上传成功！
上一篇： AJAX异步多文件上传
下一篇： FastDFS改造文件上传