今天来给大家详细的介绍一下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 id="a"><b id="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发送文件。简单的<form>中在包含一个<input>元素就可以：
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>file to stash:</label>
<input type="file" name="file" required />
<input type="submit" value="stash the file!" />
</form>
<div></div>
然后你可以使用下面的代码去发送：
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);
你也可以直接向formdata对象中添加file或blob，就像下面这样：
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
});
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
用js操作http的cookie的实现步骤
js操作bom对象模型的详细介绍
在html的网页布局里div与span有什么区别
以上就是html里formdata对象的详细介绍的详细内容。