前言

前端开发中，表单应该是我们最常见的页面板块了。那么表单数据提交过程当中， 我们利用到了哪些东西呢，简单了解一下。

在上古时代老旧的表单信息提交中 ，我们都是设定 form 表单的 action 属性 进行提交。 但是他会刷新一次页面。在前端的不断发展当中, 在 XMLHttpRequest 出现之后，这种方式被使用的越来越少了。那么我们接下说说关于表单的上传。

1. 使用 XMLHttpRequest

大多数使用场景当中，我们都是以这种方式进行使用，如果你对 form 标签够属性，你应该知道下面这几项属性：

1. action ： 处理表单提交的 URL

2. enctype : 当 method 属性值为 post 时，表单的内容提交给服务器的 MIME 类型,

   • application/x-www-form-urlencoded：未指定属性时的默认值。
   • multipart/form-data：当表单包含 type=file 的 <input> 元素时使用此值。
   • text/plain：出现于 HTML5，用于调试。

3. method : 提交方式， 值为 post , get

注意： 使用 GET 方法（这种情况下 enctype 属性会被忽略）

现在，我们提交一个表单，它里面有两个字段，分别被命名为 foo 和 baz。如果你用 POST 方法，那么服务器将会接收到一个字符串类似于下面三种情况之一，其中的区别依赖于你采用何种编码类型：

• 方法：POST；编码类型：application/x-www-form-urlencoded（默认）:

  Content-Type: application/x-www-form-urlencoded
  
  foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
  

• 方法：POST；编码类型：text/plain：

  Content-Type: text/plain
  
  foo=bar
  baz=The first line.
  The second line.
  

• 方法：POST；编码类型：multipart/form-data：

  Content-Type: multipart/form-data; boundary=---------------------------314911788813839
  
  -----------------------------314911788813839
  Content-Disposition: form-data; name="foo"
  
  bar
  -----------------------------314911788813839
  Content-Disposition: form-data; name="baz"
  
  The first line.
  The second line.
  
  -----------------------------314911788813839--
  

  不知道你发现没有，最后一种格式，实际上我们只是一个字符串，并不是 new FormData() 这样子的格式。

使用 AJAX 的例子更为复杂， 使用 XMLHttpRequest – Web API 接口参考 | MDN (mozilla.org)

第二种方式（使用 FormData API）是最简单最快捷的，但是缺点是被收集的数据无法使用 JSON.stringify() 转换为一个 JSON 字符串。而只使用 AJAX 则更为复杂，但也更灵活、更强大。

2. 使用new FormData 对象

FormData 构造函数能使你编译一个键/值对的集合，然后使用 XMLHttpRequest 发送出去。其主要用于发送 form 数据，但是也能被单独用来传输 form 中用户指定的数据, 又或者是增加 form 中不存在的数据。传输的数据格式与表格使用 submit() 方法发送数据的格式一致，如果该表格的编码类型被设为 “multipart/form-data”. FormData 对象可以被结合 XMLHttpRequest 的多种方法利用。

var formData = new FormData();

formData.append("foo", "bar");
formData.append("baz", 'The first line.The second line.');

// 增加input type='file' 选择的文件
formData.append("userfile", fileInputElement.files[0]);

// 附件额外数据
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

加入下面代码，也能发送一个带有文件的表单数据

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

结尾

而现如今，我们可能只是单纯的使用 form 进行表单数据的收集， 在提交后端的时候 却更多的使用 XMLHttpRequest 结合json 进行数据的传递。而文件的上传被单独划分为一个专门的接口，又或者是 oss 。只负责文件的上传，简而言之： 文件的上传是单独了。