FormData简介

FormData 简单介绍

FormData是Ajax 2.0对象用以将数据编译成键值对，以便于XMLHttpRequest来发送数据。XMLHttpRequest Level 2提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作。

我们打印这个构造函数看一眼

ƒ FormData()
    arguments: null
    caller: null
    length: 0
    name: "FormData"
    prototype: FormData
    append: ƒ append()
    delete: ƒ delete()
    entries: ƒ entries()
    forEach: ƒ forEach()
    get: ƒ ()
    getAll: ƒ getAll()
    has: ƒ has()
    keys: ƒ keys()
    set: ƒ ()
    values: ƒ values()
    constructor: ƒ FormData()
    Symbol(Symbol.iterator): ƒ entries()
    Symbol(Symbol.toStringTag): "FormData"
    __proto__: Object
    __proto__: ƒ ()
    [[Scopes]]: Scopes[0]

通过打印并查看formData的结构，可以发现该接口对象本身非常简单。在formData构造函数原型对象上只有append、forEach、keys等少数方法。

FormData的主要用处
​

网络请求中处理表单数据
网络请求中处理用来异步的上传文件

FormData 实例的创建
​

◆ new FormData ( HTMLFormElement: ele)

在使用FormData构造函数创建实例对象的时候，可以传递一个HTML表单元素，该表单元素允许是任何形式的表单控件，包括文件输入框、复选框等。

<form name="formTest">
    <input type="text" placeholder="请输入用户名" name="user" value="wendingding">
    <input type="password" placeholder="请输入密码" name="pass" value="123456789">
</form>

//列出创建formData实例对象的几种方式
//001 通过构造函数创建不传递任务参数
var formData1 = new FormData();   //空的实例对象

//通过调用对象的方法来设置数据(模拟表单)
//设置数据
formData1.set("name","文顶顶");
formData1.set("email","wendingding_ios@126.com");
formData1.set("friends","熊大");
    
//设置数据(追加)
formData1.append("friends","光头强");
formData1.append("friends","萝卜头");
    
//查看实例数据
formData1.forEach(function(value,key){
   
    console.log(key,value);
})
console.log("----------------------------------");

//002 获取表单标签传递给FormData构造函数
var formData2 = new FormData(document.getElementById("formTest"))
formData2.forEach(function(value,key){
   
    console.log(key,value);
})

**注意：**表单标签必须要添加name属性才能获取其数据
​

说明： 在上面的示例代码中介绍了两种创建(获取)formData实例对象的方式，可以先创建一个空的实例对象也可以直接通过页面中的表单标签来进行初始化处理。

当formData数据装填好之后，可以直接通过ajax方法提交到服务器端，下面给出上面代码的执行结果。

name 文顶顶
email wendingding_ios@126.com
friends 熊大
friends 光头强
friends 萝卜头
----------------------------------
user we