使用FormData向后台发送数据

最新推荐文章于 2023-08-22 10:56:01 发布

云创吴彦祖

最新推荐文章于 2023-08-22 10:56:01 发布

阅读量8.1k

点赞数

分类专栏： js 文章标签： formdata 图片发送 type=file

本文链接：https://blog.csdn.net/weixin_41756610/article/details/80347541

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

很多时候在使用form向后台发送数据的时候，并不需要使用到表单组件。

例如时间戳、ip等，这个时候除了ajax之外，还可以使用HTML5的一个全新方法FormData；在input[type = file]的文件类型中，很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时，无法赋值给file文件，只能转换为base64类型传送到后台，然后由后台转换为图片再进行服务器存储；此过程较为复杂；

使用formdata，只需创建新的formdata对象，将要发送的数据添加进去，后台即可接收；数据以及文件对象皆可；

此处已图像为例：

方法1：使用form

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>获取</title>
		<script src="js/jquery.js"></script>
	</head>
	<body>
		<img src="img/1.png" alt="" id="imgs"/>
		<form action="" method="" id="myform">
			<input type="submit" value="提交" />
		</form>
		<script>
			var imgObj = document.getElementById("imgs");
			var myform = document.getElementById("myform");//获取form节点
			var myFormData = new FormData(myform);//根据获取到的form节点创建formdata对象；
			myFormData.append("name",imgObj);//后台即可根据此name捕获到前台发送的数据或文件；
		</script>
	</body>
</html>

方法2：使用ajax

var  newFormData = new FormData();
			newFormData.append("username","张三");
			newFormData.append("userPwd","xxxxxxxxx");
			$.ajax({
				type:"get",
				url:"",
				async:true,
				data:newFormData,
				success:function(data){
					console.log(data);
				}
			});

君凯商联网 - Alex.Ma

云创吴彦祖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
使用FormData向后台发送数据

很多时候在使用form向后台发送数据的时候，并不需要使用到表单组件。例如时间戳、ip等，这个时候除了ajax之外，还可以使用HTML5的一个全新方法FormData；在input[type = file]的文件类型中，很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时，无法赋值给file文件，只能转换为base64类型传送到后台，然后由后台转换为图片再进行服务器存储；此过程较为复...
复制链接

扫一扫