前言
前端开发中，表单应该是我们最常见的页面板块了。那么表单数据提交过程当中， 我们利用到了哪些东西呢，简单了解一下。
在上古时代老旧的表单信息提交中 ，我们都是设定 form 表单的 action 属性 进行提交。 但是他会刷新一次页面。在前端的不断发展当中, 在 XHLHttpRequest 出现之后，这种方式被使用的越来越少了。那么我们接下说说关于表单的上传。
1. 使用 XHLHttpRequest
大多数使用场景当中，我们都是以这种方式进行使用，如果你对 form 标签够属性，你应该知道下面这几项属性：
-
action： 处理表单提交的URL -
enctype: 当method属性值为post时，表单的内容提交给服务器的 MIME 类型,application/x-www-form-urlencoded：未指定属性时的默认值。multipart/form-data：当表单包含type=file的<input>元素时使用此值。text/plain：出现于 HTML5，用于调试。
-
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-- 复制代码不知道你发现没有，最后一种格式，实际上我们只是一个字符串，并不是所谓的文件。 却使用了文件的类型。严格来说这应该是不规范的。
使用 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 进行表单数据的收集， 在提交后端的时候 却更多的使用 XHLHttpRequest 结合json 进行数据的传递。而文件的上传被单独划分为一个专门的接口，又或者是 oss 。只负责文件的上传，简而言之： 文件的上传是单独了。