深入浅出new FormData()

一、概述

FormData对象的使用：

1. 用一些键值对来模拟一系列表单控件：即把form中所有的元素的name与value组成一个queryString。
2. 异步上传二进制文件。

二、使用

1. 创建一个空对象实例。

   var myform = new FormData();
   

2. 使用已有的表单来初始化

   <form id="myForm" action="" method="post">
   	<input type="text" name="name">名字
    	<input type="password" name="psw">密码
   	<input type="submit" value="提交">
   </form>
   

   可以使用这个表单元素作为初始化参数，来实例化FormData对象

   // 获取页面已有的一个form表单
   var form = document.getElementById("myForm");
   // 用表单来初始化
   var formData = new FormData(form);
   // 我们可以根据name来访问表单中的字段
   var name = formData.get("name"); // 获取名字
   var psw = formData.get("psw"); // 获取密码
   // 当然也可以在此基础上，添加其他数据
   formData.append("token","kshdfiwi3rh");
   

3. API操作

   3.1、取值

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

   3.2、添加数据

   ​ 通过append(key,value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则追加到数据末尾

   formData.append("k1", "v1");
   formData.append("k1", "v2");
   formData.append("k1", "v1");
   
   formData.get("k1"); // "v1"
   formData.getAll("k1"); // ["v1","v2","v1"]
   

   3.3、设置修改数据

   ​ 通过set(key,value)来设置修改的数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

   formData.append("k1", "v1");
   formData.set("k1", "1");
   formData.getAll("k1"); // ["1"]
   

   3.4、判断是key是否存在

   ​ 通过has(key)判断key对应的键值对是否存在，存在返回值为true，不存在返回值为false

   formData.append("k1", "v1");
   formData.append("k2",null);
   
   formData.has("k1"); // true
   formData.has("k2"); // true
   formData.has("k3"); // false
   

   3.5、删除数据

   ​ 通过delete(key)删除key对应的键值对

   formData.append("k1", "v1");
   formData.append("k1", "v2");
   formData.append("k1", "v1");
   formData.delete("k1");
   
   formData.getAll("k1"); // []
   

   3.6、遍历

   3.6.1、每调用一次next()返回一条数据，数据的顺序由添加的顺序决定

   3.6.2、返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据

   3.6.3、返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回

   formData.append("k1", "v1");
   formData.append("k1", "v2");
   formData.append("k2", "v1");
   
   var i = formData.entries();
   
   i.next(); // {done:false, value:["k1", "v1"]}
   i.next(); // {done:fase, value:["k1", "v2"]}
   i.next(); // {done:fase, value:["k2", "v1"]}
   i.next(); // {done:true, value:undefined}
   

4. 发送数据到后台

   <!--HTML部分-->
   <form action="">
   	<label for="">
   		姓名: <input type="text" name="name">
   	</label>
   	<label for="">
   		文件：<input id="file" type="file" name="file">
    	</label>
    	<label for="">
   		<input type="button" value="保存">
   	</label>
   </form>
   

   4.1、原生ajax

   //原生js上传文件
   //获取按钮
   var btn = document.querySelector('[type=button]');
   //绑定事件
   btn.onclick = function () {
       //获取input标签
       var file = document.querySelector('[type=file]');
       // 新建FormData对象
       var formData = new FormData();
       // 取得input标签中的文件。注：input标签中的文件可以选择多个
       formData.append('upload', file.files[0]);
   	//创建XMLHttpRequest，用这个来发送数据
       var xhr = new XMLHttpRequest;
       /*初始化HTTP请求参数(请求方式,url,是否同步)*/
       xhr.open('post', 'file.php');
   	
   	/*
   	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   	设置请求头的contentType
   	*/
   	
       // 监听上传进度
       xhr.upload.onprogress = function (ev) {
       // 事件对象
       // console.log(ev);
   
           var percent = (ev.loaded / ev.total) * 100 + '%';
   
           console.log(percent);
   
           progress.style.width = percent;
       }
   
       xhr.send(formData);
   
       xhr.onreadystatechange = function () {
       //status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪 
               if(xhr.readyState == 4 && xhr.status == 200) {
               }
       }
   }
   

   4.2、jq ajax

   //绑定提交事件
   function upload() {
       //获取form表单元素
       var f = document.getElementById("myForm");
       //使用表单元素来构造FromData
       var myform = new FormData(f);
       $.ajax({
           url: "/Library/test/upload",
           type: "post",
           dataType: "json",
           data: myform,
           cache: false,                      // 不缓存
           processData: false,                // jQuery不要去处理发送的数据
           contentType: false,                // jQuery不要去设置Content-Type请求头
           success: function (data) {
               console.log(data);
           }
       });
   }
   

   4.3、axios

   //不需要html板块方式
   //注意：input type="file" 需要通过用户主观点击某块元素触发事件，不可页面加载完成调用，被动调用报错：File chooser dialog can only be shown with a user activation.（翻译：文件选择器对话框只能在用户激活时显示。）
   function upImg(){
       const inp = document.createElement("input");
   	const _this = this
   	inp.type = "file";
   	inp.click();
   	inp.onchange = function(e) {
     		console.log(e.target.files[0]);
     		let params = new FormData(); //创建form对象
     		params.append("file", e.target.files[0]);
     		_this.$axios.post("/api/Base/uploadImg", params).then(res => {
         		console.log(res)
       	}).catch(err => {
         	console.log(err);
       	});
   	}
   }