FormData的用途

FormData主要有两个用途：

1.将form表单元素的name与value进行组合，实现表单数据的序列化，从而减小表单元素的拼接，提升工做效率。

2.异步上传文件

一，建立formData对象

1，建立一个空对象

//经过FormData构造函数建立一个空对象

var formdata=new FormData()

//能够经过append()方法来追加数据

formdata.append('name','laotie')

//经过get方法对值进行读取

console.log(formdata.get('name'));//laotie

//经过set方法对值进行设置

formdata.set('name','laoliu');

console.log(formdata.get('name'));//laoliu

2，经过表单对formData进行初始化

建立表单：

<form id="advForm">

　　<p> 广告名称：<input type="text" name="advName" value="xixi">  </p>

　　<p>广告类别：<select name="advType">

　　　　<option value="1">轮播图</option>

　　　　<option value="2">轮播图底部广告</option>

　　　　<option value="3">热门回收广告</option>

　　　　<option value="4">优品精选广告</option>　　

　　</select></p>

　　<p> <input type="button" id="btn" value="添加"> </p>

</form>

经过表单元素做为参数，实现对formData的初始化：

//得到表单按钮元素

var btn=document.querySelector("#btn")

//为按钮添加点击事件

btn.onclick=function(){

　　//根据ID得到页面当中的form表单元素

　　var form=document.querySelector("#advForm");

　　//将得到的表单元素做为参数，对formData进行初始化

　　var formdata=new FormData(form)

　　//经过get方法得到name为advName元素的value值

　　console.log(formdata.get("advName"))//xixi

　　//经过get方法得到name为advType元素的value值

　　console.log(formdata.get("advType"))//1

}

二，操做方法

1，经过get(key)与getAll(key)来获取对应的值

//获取key为age的第一个值

formdata.get("age")

//获取key为age的全部值，返回值为数组类型

formdata.getAll("age")

2，经过append(key,value)在数据末尾追加数据

//经过FormData构造函数建立一个空对象

var formdata=new FormData()

//经过append()方法在末尾追加key为name值为laoliu的数据

formdata.append("name","laoliu")

//经过append()方法在末尾追加key为name值为laoli的数据

formdata.append("name","laoli")

//经过append()方法在末尾追加key为name,值为laotie的数据

formdata.append("name","laotie")

//经过get方法读取key为name的第一个值

console.log(formdata.get("name"));//laoliu

//经过getAll方法读取key为name的全部值

console.log(formdata.getAll("name"))//["laoliu","laoli","laotie"]

3，经过set(key,value)来设置修改数据

key的值不存在，会添加一条数据

//经过Formdata够着函数建立一个空对象

var formdata=new FormData()

//若是key的值不存在会为数据添加一个key为name值为laoliu的数据

formdata.set("name","laoliu")

//经过get方法读取key为name的第一个值

console.log(formdata.get("name"));//laoliu

key的值存在，会修改对应的value值

//经过FomrData构造函数建立一个空对象

var formdata=new FormData()

//经过append()方法在末尾追加key为name值为laoliu的数据

formdata.append("name","laoliu")

//经过append()方法在末尾追加key为name，值为laoliu2的数据

formdata.append("name","laoliu2")

//经过get方法读取key为name的第一个值

console.log(formdata.get("name"))://laoliu

//经过getAll方法读取key为name的全部值

console.log(formdata.getAll("name"));["laoliu","laoliu2"]

//将存在的key为name的值修改成laoli

formdata.set("name","loali")

//经过get方法读取key为name的第一个值

console.log(formdata.get("name"));//laoli

//经过getAll方法读取key为name的全部值

console.log(formdata.getAll("name"));//["laoli"]

4，经过has(key)来判断是否存在对应的key值

//经过FormData构造函数建立一个空对象

var formdata=new FormData()

//经过append()方法在末尾追加key为name值为laoliu的数据

formdata.append("name","laoliu")

//判断是否包括key为name的数据

console.log(formdata.has("name"));//true

//判断是否包含key为age的数据

console.log(formdata.has("age"));//false

5.经过delete(key)能够删除数据

//经过FormData构造函数建立一个空对象

var formdata=new FormData()

//经过append()方法在末尾追加key为name值为laoliu的数据

formdata.append("name","laoliu")

console.log(formdata.get("name"))//laoliu

//删除key为name的值

formdata.delete("name")

console.log(formdata.get("name"))//null

三，经过XMLHttpRequest发送数据

建立表单：

<form id="advForm">

　　<p>广告名称：<input type="text" name="advName" value="xixi"></p>

　　<p>广告类别：<select name="advType">

　　　　<option value="1">轮播图</option>

　　　　<option value="2">轮播图底部广告</option>

　　　　<option value="3">热门回收广告</option>

　　　　<option value="4">优品精选广告</option>

　　</select></p>

　　<p>广告图片：<input type="file" name="advPic"></p>

　　<p>广告地址：<input type="text" name="advUrl"></p>

　　<p>广告排序：<input type="text" name="orderBy"></p>

　　<p><input type="button" id="btn" value="添加"></p>

</form>

发送数据：

var btn=document.querySelector("#btn")

btn.onclick=function(){

　　var formdata=new FormData(document.getElementById("advForm"))

　　var xhr=new XMLHttpRequest();

　　xhr.open("post","http://127.0.0.1/adv")

　　xhr.send(formdata)

　　xhr.onload=function(){

　　　　if(xhr.status==200){

　　　　　　//....

　　　　}

　　}

}

 摘录路径：https://www.jianshu.com/p/e984c3619019