文件上传——FormData

最新推荐文章于 2023-06-14 16:18:52 发布

秃头侠

最新推荐文章于 2023-06-14 16:18:52 发布

阅读量259

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/maqinchaoTnT/article/details/89342308

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文件上传——FormData

XMLHttpRequest 新增了FormData 可用于文件上传

三种创建方式

1.var formdata = new FormData();

2.var formobj = document.getElementById(“form”);、
var formdata = new FormData(formobj);

3.var formobj = document.getElementById(“form”);
var formdata = formobj.getFormData()

基本操作

formData.append(“key”,“value”);
formData.delete(“key”)
formData.get(“key”)
formData.getAll(“key”)
formData.has(“key”)
formData.set(“key”,“value”) //与append的主要区别 set会覆盖同一个key append添加value在原来的值后面

例子：

<html>
	<head>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<input id="file" name="file" type="file"></input>
		<button id="upload" type="button">upload</button>
		<script>
			
			$("#upload").click(function(event){
				var formData=new FormData();
				formData.append("file",$('#file')[0].files[0]);
				formData.append("task_id",111); 
				$.ajax({
					url: 'http://127.0.0.1:8085/test/upload',
					type: 'POST',
					cache: false,
					data: formData,
					processData: false,
					contentType: false
				}).done(function(res) {
				
				}).fail(function(res) {
				
				});
		})
		</script>
	</body>
</html>

服务端：

public Map multiFileUpload(@RequestParam(name = “file”, required = false) MultipartFile[] files)

秃头侠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文件上传——FormData

文件上传——FormDataXMLHttpRequest 新增了FormData 可用于文件上传三种创建方式1.var formdata = new FormData();2.var formobj = document.getElementById(“form”);、var formdata = new FormData(formobj);3.var formobj = docu...
复制链接

扫一扫