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…