前端 | FormData 用法详解

前端 | FormData 用法详解

介绍

​FormData 是 Ajax2.0 对象用以将数据编译成键值对，以便于 XMLHttpRequest 来发送数据。XMLHttpRequest Level 2 提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作
​
如果表单属性设为 multipart/form-data，则会使用表单的 submit() 方法来发送数据，从而发送数据具有同样形式。

FormData 的主要用途有两个：

1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2. 异步上传二进制文件

使用方法

• 创建一个空的对象

// 当前为空
var formData = new FormData();

// 通过 append 方法添加数据
formData.append("username", "username");

• 创建一个带预置数据的对象

<form id="myForm" action="" name="myForm">
  <div>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
  </div>
  <div>
    <input type="submit" value="提交">
  </div>
</form>

注意
所有的输入元素都需要有 name 属性，否则无法访问到值。

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");

// 用表单来初始化
var formData = new FormData