无需手动造，表单数据任意填——FormData API全解析

FormData对象介绍

这个新的JavaScript API——FormData，处理表单真的超给力！不只是能轻松模拟复杂的表单控件，还有 send()方法可以异步提交数据。更神奇的是，它居然还能直接上传二进制文件，简直就是Web开发中的重大突破！

使用append()方法添加字段

var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);
var oFileBody = "hey!"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
oMyForm.append("webmasterfile", oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

想要往FormData里面扔各种玩意儿？没问题，有了FormData.append（）这个神奇的技能，我们可以随意填塞了!不过得记住，如果你想在”accountnum”这个字段里塞个数值，当你传过去的时候，它会自动变成字符串。但别担心，这个数字并不限于整数，Blob对象、File对象甚至字符串也都是允许的。这样的话，处理表单数据就变得轻松容易多啦～

初始化FormData对象

别傻乎乎地自己造FormData，用现有的HTML表单元素搞定它更快~就像把form当成个普通参数传给FormData意思一下，搞定，表单信息自动变成FormData模式。叻？想加东西进去？简单得很呐！

继续添加新键值对

var newFormData = new FormData(someFormElement);

瞧着，我们还能用append()这个方法在填写完的表单上加个料！对于那些不能改变的东西，这种方法绝对没得错。然后把更新过的表单发给服务器处理就成了~这样就能确保表单信息不再出问题，传输过程也更加稳妥。

var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));

发送二进制文件

想把资料放到网上共享？用对工具就行！像FormData这种神器，给它配上表单，就能在网页上一秒钟搞定上传文件的步骤，都不需要自己写代码！这样就轻松很多咯，特别适合那些偷懒不想麻烦的小伙伴们~

var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);

直接添加File对象或Blob对象

别的不说，搞定HTML表单元素那叫一个费劲。别着急，给你们介绍个小妙招——直接加入File或者Blob到FormData里去，搞定！不用再操心HTML表单元素这些破事儿，轻轻松松就能上传文件咯～咱的前端代码看着清爽多了是不是？

跨浏览器兼容性问题

记住，给浏览器发含有Blob的FormData，得看是用啥浏览器。像那个”Content-Disposition”头，火狐直接用“blob”没毛病，但Chrome就可能随机取个名字。所以得留心这些小细节，防止出现不兼容。

  Your email address:
  

  Custom file label:
  

  File to stash:
  


Stash the file!

使用jQuery发送FormData

不用纠结于原生的JavaScript，jQuery也能帮你处理FormData数据上传问题！记得选好参数就行，这样就能把数据顺利传送到服务器咯。既然采用了jQuery，你会享受到各种便捷的函数和方法，还有各种各样的自定义选项供你挑选喔~

想学就来看看XMLHttpRequest Level 2里的FormData这个神奇玩意儿，学会了它你就可以轻松地上传表格信息跟各种文件咯！这样网页开发就更便捷有趣了！

function sendForm() {
  var oOutput = document.getElementById("output");
  var oData = new FormData(document.forms.namedItem("fileinfo"));
  oData.append("CustomField", "This is some extra data");
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.
";
    }
  };
  oReq.send(oData);
}