AJAX 基于 FormData 上传文件

使用AJAX与FormData实现文件上传到Java后端

最新推荐文章于 2022-04-20 22:01:02 发布

原创最新推荐文章于 2022-04-20 22:01:02 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html5 #java

日常记录专栏收录该内容

2 篇文章

订阅专栏

该博客展示了如何利用jQuery和FormData通过AJAX实现前端文件上传功能，将两个文件（printTemplate和reviewTemplate）提交到Java后台。在JavaScript中，创建FormData对象并附加文件，然后在AJAX请求中设置contentType和processData为false以保留原始数据。Java后端通过@RequestParam注解接收上传的文件，并打印文件名。

AJAX 基于 FormData 上传文件

使用jquery，不说废话，直奔代码

1.html部分

	<input id="printTemplate" type="file">
	<input id="reviewTemplate" type="file">
	<button onclick="sub()">提交</button >

2.js部分

function sub(){
	let fd = new FormData(); //声明一个 formData对象
	fd.append("printTemplate", $("#printTemplate").get(0).files[0]);
	fd.append("reviewTemplate", $("#reviewTemplate").get(0).files[0]);
	$.ajax({
		url: "/uploadTemplateFiles",
		type: "post",
		dataType: "json",
		contentType: false,
		processData: false,// 告诉jQuery不要去处理发送的数据
		data: fd,
		success: function (result) {
		  alert(‘上传成功’);
	    }
	 }
}

3.java后台部分

@PostMapping("/uploadTemplateFiles")
@ResponseBody
public AjaxResult uploadTemplateFile(@RequestParam("reviewTemplate") MultipartFile reviewTemplate,@RequestParam("printTemplate") MultipartFile printTemplate) {
    System.out.println(reviewTemplate.getOriginalFilename());//输出文件名
    System.out.println(printTemplate.getOriginalFilename());
    return null;
}