new FromData() - FormData对象的作用及用法

本文链接：https://blog.csdn.net/AnitaSun/article/details/115284474

一、js FromData方法介绍

构造函数

创建一个空对象实例
```
var formData = new FormData();
```
此时可以调用append()方法来添加数据

使用已有的表单来初始化一个对象实例
假如现在页面已经有一个表单

<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");

操作方法

fromData里储存数据的方法（key/value）
一个key可能对应多个value
表单：一个表单字段对应一条数据（HTML的name属性是key值，value属性对应value值）

获取值

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

添加数据
如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

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

修改数据
通过set(key, value)来修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。
```
formData.set("k1", "1");
```

判断是否含有该数据
可以通过has(key)来判断是否对应的key值

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

删除数据
通过delete(key)，来删除数据

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

遍历
我们可以通过entries()来获取一个迭代器，然后遍历所有的数据，

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:false, value:["k1", "v2"]}
i.next(); // {done:false, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

也可以通过values()方法只获取value值

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

发送数据

var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

二、FromData的实践

概述：

FormData 对象的使用：

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

使用：

FromData对象的操作方法，全部在原型中，自己本身没有任何的属性和方法

使用FormData对象发送文件

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>

JS部分
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
    // 文件元素
    var file = document.querySelector('[type=file]');
    // 通过FormData将文件转成二进制数据
    var formData = new FormData();
    // 将文件转二进制
    *****注意2******
    formData.append('upload', file.files[0]);
    *****注意1******
    var xhr = new XMLHttpRequest;
    xhr.open('post', 'file.php');
    // 监听上传进度
    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 () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                    //
            }
    }
}

注意1：使用jQuery

$.ajax({
    url: 'file.php',
    type: 'POST',
    data: formdata,                    // 上传formdata封装的数据
    dataType: 'JSON',
    cache: false,                      // 不缓存
    processData: false,                // jQuery不要去处理发送的数据
    contentType: false,                // jQuery不要去设置Content-Type请求头
    success:function (data) {           //成功回调
        console.log(data);
    }
});