FormData实现文件上传

最新推荐文章于 2024-05-24 00:19:06 发布

lucky-peach

最新推荐文章于 2024-05-24 00:19:06 发布

阅读量2.8k

点赞数 1

分类专栏： java文件上传下载文章标签： js文件上传下载 js中formData的使用 formData文件上传下载 formData ajax文件上传下载

本文链接：https://blog.csdn.net/little__SuperMan/article/details/82900820

版权

java文件上传下载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。从而实现文件的上传

一、FormData对象的构造

1、创建一个FormData空对象,然后通过append()方法添加数据

FormData formData = new FormData();

formData.append("username",username);

formData.append("password",password);

2、通过已有的表单来初始化一个对象实例

formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

 <form id="form" enctype="multipart/form-data" method="post">
        用户名：<input id = "username" type="text" name="username"><br/><br/>
        密码：<input id = "password" type="text" name="password"><br/><br/>
        	<input id = "file" type="file" name="file"><br/><br/>
         	<input type="button" value="提交" id="fileUpload">
 </form>

 //获取页面已有的一个form表单来初始化
 var formData = new FormData($("#form")[0]);
 //获取表单中的字段
 var username = formData.get("username");
 var password = formData.get("password");
 onsole.log("username"+username+",password"+password);
 //在此基础上，添加其他数据
 formData.append("age",100);
 formData.append("sex","man");

二、方法

1、获取值 ---通过get(key)/getAll(key)来获取对应的value，

formData.get("username"); // 获取key为name的第一个值
formData.getAll("username"); // 返回一个数组，获取key为name的所有值

2、添加值---append(key,value);，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

formData.append("username",username);
formData.append("password",password);
formData.append("age",100);
formData.append("sex","man");

3、修改值---set(key, value)来修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

formData.append("username", "佛顶山");
formData.set("username", "破壳");
formData.getAll("username"); //破壳

4、删除值---delete(key)，来删除数据

formData.append("username", "梵蒂冈");
formData.delete("username");
formData.getAll("username"); //[]

5、判断数据是否存在---has(key)来判断是否对应的key值

formData.append("username1", "佛顶山");
formData.append("username2", "破壳");
formData.has("username1"); //true
formData.has("username2"); //true
formData.has("username3"); //false

三、遍历

规则：

每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回

formData.append("username1", "佛顶山");
formData.append("username2", "破壳");
formData.append("username3", "翻滚吧");
formData.append("username4", "凤凰飞天");

var ent = formData.entries();
		
ent.next(); //{done:false, value:["username1", "佛顶山"]}
ent.next(); //{done:false, value:["username2", "破壳"]}
ent.next(); //{done:false, value:["username3", "翻滚吧"]}
ent.next(); //{done:false, value:["username4", "凤凰飞天"]}
ent.next(); //{done:true, value:undefined}

四、上传示例(下载的js代码就是一个ajax请求然后后台处理一下就可以了，这里就省略了)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
	<form id="form" enctype="multipart/form-data" method="post">
        上传用户：<input id = "username" type="text" name="username"><br/><br/>
        上传文件：<input id = "file" type="file" name="file"><br/><br/>
         <input type="button" value="提交" id="fileUpload">
     </form>
</body>
	<script type="text/javascript">
	console.log("-------------");
	$("#fileUpload").click(function(){
		//获取上传文件
		var uploadFile = $("#file")[0].files;
		// 用表单来初始化
		var formData = new FormData($("#form")[0]);
		if (uploadFile.length > 0) {
			//获取上传的用户名
			var username = $("#username").val();
			//往formData对象中存值
			console.log("username:"+username+",uploadFile"+uploadFile);
			$.ajax({
				type: 'POST',
				url:"http://localhost:8080/fileUpload/fileUpload",
				data:formData,
				async: true,	// 默认是true，即为异步方式
				cache: false,   //是否在缓存中读取数据的读取。(false 每次读取的是最新的数据)
				contentType: false,	  // 告诉jQuery不要去设置Content-Type请求头
				processData: false,   // 告诉jQuery不要去处理发送的数据
				timeout: 0,	  //async必须设置为async:ture，timeout才生效；(默认的timeout为0，代表永不超时)
				success:function(data){
					alert("上传成功");
				},
				error:function(){
					alert("未知的错误");
				}
			})
		}else {
			alert("选择的文件无效！请重新选择");
		}	
	})
	</script>
</html>

五、上传文件查询

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
	<input id="search" type="button" name="search" value="查找">
</body>
	<script type="text/javascript">
	$("#search").click(function(){
		console.log("***************************************");
		$.ajax({
			type: 'POST',
			url:"http://localhost:8080/fileUpload/fileSearch",
			data:{
				'username':'小明',
			},
			async: true,	// 默认是true，即为异步方式
			cache: false,   //是否在缓存中读取数据的读取。(false 每次读取的是最新的数据)
			success:function(data){
				console.log(data);
				alert("查询成功");
			},
			error:function(){
				alert("未知的错误");
			}
		})
	})
	</script>
</html>

这篇文章可以和我的另一篇Java文件上传下载一同使用：https://blog.csdn.net/little__SuperMan/article/details/82897757

formData内容详细链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

lucky-peach

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
5
评论
FormData实现文件上传

FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。从而实现文件的上传一、FormData对象的构造1、创建一个FormData空对象,然后通过append()方法添加数据FormData formData = new FormData();formData.append("username",username...
复制链接

扫一扫

专栏目录