JS FormData对象

什么是 FormData 对象

今天在看犀牛书的一个 demo 时，看到一段代码

var body = new FormData();
body.append(key, value);

看到这里，我就不明白了，JS 哪来的 append()方法？上网找了找，发现这是 FormData 对象的一个方法，那我们今天就聊聊这个 FormData 吧。希望对读者有所帮助。

通常我们用 submit 提交表单时，会把所有表单的 name 和 value 组成一个 queryString，如果你用 jQuery，那就是 serialize。但是我们使用 ajax 提交时，就需要手动去做这件事了，如：

var postObj = {key1:value1, key2:value2,...}
$.post(url, postObj, callback);

如果键值对比较少时，无所谓，但是如果有很多个需要提交的项，那不得累死啊。所以 JS 中有一个 FormData 对象。

解决办法

W3C 草案提供了以下 3 种方案来获取或修改 FormData：

1.创建一个空的 FormData 对象，然后用 append 方法逐个添加键值对：

var formdata = new FormData();
formdata.append('key':'value');
//这样的话，我们就可以用一个遍历，把需要的数据都append到formdata里

2.取得 form 元素，将它作为参数传入 FormData 对象中：

var formobj = document.getElementById("form");
var formdata = new FormData(formobj);

3.利用 form 元素对象的 getFormData 方法生成：

var formobj = document.getElementById("form");
var formdata = formobj.getFormData();

利用 FormData 对象，就可以使用原生 JS 通过 ajax 上传数据。虽然现在 jQuery 的插件方便了很多，但我们的追求是：要知其然并知其所以然。

[越努力，越幸运！]