FormData实现文件上传

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表单来初始化
 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请求然后后台处理一下就可以了，这里就省略了)

	
	
	


	

        上传用户：


        上传文件：


         
     

	

五、上传文件查询

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

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