今天来给大家详细的介绍一下formdata对象，下面从头从头开始创建一个formdata对象，然后通过append() 方法向对象中添加键值，请看案例
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = '<a><b>hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
注意：字段”userfile” 和 “webmasterfile” 都包含文件（file）。被分配到字段”accountnum”上的数字直接被FormData.append()方法转换成了字符串（字段的值（value）可能是一个Blob, File, 或一个string：如果值既不是Blob也不是File，则值会被转换成一个string）。
这个例子创建了一个FormData实例，其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”，然后使用XMLHttpRequest对象的send()方法去发送表单数据。字段”webmasterfile”是一个Blob。一个Blob对象代表一个文件对象的原始数据。但是Blob代表的数据不必须是javascript原生格式的数据。文件接口是基于Blob,继承Blob功能和扩大它对用户文件系统的支持。为了构建一个Blob可以调用Blob()构造函数。
从一个HTML表单获得一个FormData对象
为了获得一个包含已存在表单数据的FormData对象，在创建FormData对象的时候需要指定表单元素。
var formData = new FormData(someFormElement);
就像下面这样：
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));
你也可以在获得FormData对象之后增加另外的数据，就像下面这样：
var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);
这样你可以在发送之前增加额外的信息，不一定是用户编辑的。
三、使用FormData对象发送文件
你可以使用FormData发送文件。简单的
然后你可以使用下面的代码去发送：
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
var oOutput = document.querySelector("div"),
oData = new FormData(form);
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 when trying to upload your file.<br>";
}
};
oReq.send(oData);
ev.preventDefault();
}, false);
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
你也可以直接向FormData对象中添加File或Blob，就像下面这样：
<br>
data.append("myfile", myBlob, "filename.txt");
当使用append() 方法的时候，可能会使用到第三个参数去发送文件名称（通过Content-Disposition头发送到服务器）。如果没有指定第三个参数或这个参数不被支持的话，第三个参数默认是”blob”。
如果你设置好正确的options，你也可以和jQuery配合起来使用：
var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
});
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
