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上传和文件上传等场景。