FormData格式詳解

一、概述

FormData是HTML5新增的類型，主要用於提交表單數據，特別是帶有文件上傳的表單，通過JS中XMLHttpRequest的方式進行數據處理和傳遞。

通過FormData可以方便地以鍵值對的方式構建表單數據，並以”Content-Type: multipart/form-data” 格式提交到服務器端，支持字符串、文件等類型數據的傳輸。

二、FormData對象的創建和使用

創建FormData對象非常容易，只需使用new關鍵字即可：

var formData = new FormData();

創建好對象後，使用append()方法添加數據：

formData.append("username", "jack");

也可以一次添加多個數據，多次調用append()方法：

formData.append("username", "jack");
formData.append("password", "123456");

三、FormData對象的屬性和方法

FormData對象還有以下常用的屬性和方法：

1、has(key)：判斷是否存在某個字段

formData.has("username");

2、set(key, value)：設置某個字段的值

formData.set("username", "tom");

3、get(key)：獲取某個字段的值

formData.get("username");

4、delete(key)：刪除某個字段

formData.delete("username");

5、entries()：返回迭代器對象，包含所有字段(key)和值(value)

var iterator = formData.entries();
var pair = iterator.next();
while(!pair.done){
  console.log(pair.value);
  pair = iterator.next();
}

四、FormData對象常見應用

1、表單的ajax上傳

$("form").submit(function(e){
  e.preventDefault();
  var formData = new FormData(this);
  $.ajax({
    url: "http://yourserver.com/upload",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response){
      console.log(response);
    }
  });
});

2、單文件上傳

<input type="file" id="file-input" />

$("#file-input").change(function(){
  var file = this.files[0];
  var formData = new FormData();
  formData.append("file", file);
  $.ajax({
    url: "http://yourserver.com/upload",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response){
      console.log(response);
    }
  });
});

3、多文件上傳

<input type="file" multiple id="file-input" />

$("#file-input").change(function(){
  var files = this.files;
  var formData = new FormData();
  for(var i=0; i<files.length; i++){
    formData.append("file[]", files[i]);
  }
  $.ajax({
    url: "http://yourserver.com/upload",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response){
      console.log(response);
    }
  });
});

五、總結

FormData是一種非常方便的數據格式，可以處理多種類型的數據，尤其適用於表單的AJAX上傳和文件上傳等場景。