传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的。
我自己了解的实现文件上传的比较好用的,有普通的Ajax提交文件方式、FilesUpload等,但是用了FormData后,觉得fromdata使用起来更加简单便捷,所以在此给各位小伙伴们分享一下,不足之处还请各位伙伴提示,在此感谢!
例如表单:
表单内必须设enctype=”multipart/form-data”属性。
<form id="add_news" method="post" enctype="multipart/form-data" >
<input type="file" id="photo">
<input type="file" id="photo2">
<input type="file" id="photo3">
<input type="text" id="photo4">
<input type="text" id="photo5">
</form>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
第一种提交方式:
//直接把整个Form表单内容塞到FormData对象里面;
var formElement = $("#add_news");
var formData = new FormData(formElement);
$.ajax({
url: '../image/customser.do',
type: 'POST',
data: formData,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false,
success : function(data) {
alert("上传成功");
},
error:function(){
alert("上传失败");
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
第二种方式:
var formData = new FormData();
//获取普通input文本内容
formData.append("servicerid", $("#photo4").val());
formData.append("servicerid", $("#photo5").val());
//获取图片等文件
formData.append("file", $("#photo1")[0].files[0]);
formData.append("file", $("#photo2")[0].files[0]);
formData.append("file", $("#photo3")[0].files[0]);
$.ajax({
url: '../image/customser.do',
type: 'POST',
data: formData,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false,
success : function(data) {
alert("上传成功");
},
error:function(){
alert("上传失败");
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
后台获取:
@RequestMapping(value = "/image/customser.do")
@ResponseBody
public ResultObject uploadAuthImages(@RequestParam(value = "file", required = false) MultipartFile[] files,
HttpServletRequest request) {
Map<String, Object> map = new HashMap<String, Object>();
//保存文件
for(int i=0; i<files.length; i++){
String filePath = request.getSession().getServletContext().getRealPath("/") + "upload/";
UUID uuid = UUID.randomUUID();
String fileName = new Date().getTime() + uuid.toString() + ".jpg";
System.out.println("图片地址:"+filePath);
File targetFile = new File(filePath, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
// 保存
try {
files[i].transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
//添加图片路径到map集合
map.put("img"+i, "/upload/" + fileName);
}
map.put("photo4", request.getParameter("photo4"));
map.put("photo5", request.getParameter("photo5"));
return this.oneService.uploadAuthImages(map);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
这里要注意几点:
1、processData设置为false。因为data值是FormData对象,不需要对数据做处理。
2、标签添加enctype=”multipart/form-data”属性。
3、cache设置为false,上传文件不需要缓存。
4、contentType设置为false。因为是由表单构造的FormData对象,且已经声明了属性enctype=”multipart/form-data”,所以这里设置为false。
5、上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为中声明的是name=”file”。
6、后台:MultipartFile[] files 代表数组类型,获取多文件上传;如果是单文件上传的话,MultipartFile file 就可以了。
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
</div>