FormData对象的使用

FormData 接口提供了一种表示表单数据的键值对的构造方式，通过它的数据能够使用 XMLHttpRequest.send() 方法送出，本接口和此方法都至关简单直接。

 

1. 建立FormData 对象

const formData = new FormData();复制代码

   2.FormData的方法  

• FormData.get()
  返回在 FormData 对象中与给定键关联的第一个值。

  formData.get("name"); // 获取key为name的第一个值复制代码

• FormData.getAll()
  返回一个包含 FormData 对象中与给定键关联的全部值的数组。
  

  formData.getAll('name'); // 获取key为name的全部值,返回值为数组复制代码

• FormData.append()

  向 FormData 中添加新的属性值， FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，若是属性不存在则新增一项属性值。
  

  formData.append('name':'李四'); // 在表单末尾追加key为name值为李四的数据复制代码

• FormData.delete()
  从 FormData 对象里面删除一个键值对。
  

  formData.delete('name') // 删除表单里的name 属性复制代码

• FormData.entries()
  返回一个包含全部键值对的 iterator对象。
  

  formData.append('name','张三');
  formData.append('age',20);
  formData.append('sex'，'man'）;
  
  const formDataEntries = formData.entries() // 生成一个iterator
  formDataEntries.next() // {done:false,value:['name','张三']
  formDataEntries.next() // {done:false,value:['age',20]
  formDataEntries.next() // {done:false,value:['sex','man']
  formDataEntries.next() // {done:true,value:undefined}复制代码

• FormData.has() 返回一个布尔值代表
  FormData 对象是否包含某些键。
  

  formData.append('age':20)
  formData.has('age') // true
  formData.has('sex') // false复制代码

• FormData.keys()
  返回一个包含全部键的 iterator对象。
  

  formData.append('name','张三');
  formData.apend('age',24);
  const keys = formData.keys();
  keys.next() // {done: false, value: "name"}
  keys.next() // {done: false, value: "age"}
  keys.next() // {done: true, value: undefined}FormData.values()复制代码

• 返回一个包含全部值的 iterator对象
  

  formData.append('name','张三');
  formData.apend('age',24);
  const values= formData.values();
  values.next() // {done: false, value: "张三"}
  values.next() // {done: false, value: "20"}
  values.next() // {done: true, value: undefined}复制代码

• FormData.set()
  给 FormData 设置属性值，若是 FormData 对应的属性值存在则覆盖原值，不然新增一项属性值。
  

  formData.set('name','张三') // 不存在则新增，存在则把key对应的值覆盖复制代码

浏览器兼容性

若是须要兼容全部浏览器须要安装formdata-polyfill

npm install formdata-polyfill  复制代码

只须要在页面导入

require('formdata-polyfill');
var fd = new FormData(form)复制代码

具体看连接www.npmjs.com/package/for…