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","[email protected]");
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);
})