有关 HTML 表单的一些事儿 —— FormData 篇

[gogoend]

在日常开发中，假设我们要使用axios（或是原生XHR、其他的Ajax库）对一个文件进行上传，我们通常会首先在HTML中写一个type="flie"的<input>元素，用来调起系统中的文件选择器选择文件；向服务器提交该文件时，在JavaScript代码中创建一个FormData实例，并将该文件append到该实例中，然后将FormData实例里的内容传给服务器，代码大致类似：

在浏览器中打印FormData类，我们可以看到类中包含了一些列方法。

本文，我们来看看 FormData 到底是什么东西。

[gogoend]

构造一个FormData

1. 从<form>元素构造 倘若我们不借助任何现成的UI库编写表单，我们应该会这么写：

   <form>
       <fieldset>
           <legend>表单1</legend>
           <label>f1字段</label><input name="f1"/><br />
           <label>f2字段</label><input name="f2"/><br />
           <label>f3字段</label><input name="f3" value="f3_1" type="checkbox"/><input name="f3" value="f3_2" type="checkbox"/>
       </fieldset>
       <fieldset>
           <legend>表单2</legend>
           <label>f4字段</label><input name="f4"/><br />
           <label>f5字段</label><input name="f5" type="file"/><br />
           <label>f6字段</label><input name="f6" value="f6_1" type="checkbox"/><input name="f6" value="f6_2" type="checkbox"/>
       </fieldset>
   </form>

   其中包含了一些输入控件。如果使用这一表单进行提交，服务器端将会通过表单控件上的name属性对各个值进行区分。事实上，服务器端收到的由前端提交的数据形式上其实就是FormData。 要从一个现成表单元素创建FormData，我们只需把表单元素的节点传入FormData构造函数参数中。类似：

   // @gogoend
   let formEl = document.querySelector('#formEl');
   let theFormData = new FormData(formEl)