JavaScript的FormData对象

秒速五厘米 2022-05-12 06:56 216阅读 0赞

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。  
创建FormData对象  
你可以自己创建一个FormData对象，然后调用它的append()方法来添加字段，像这样：  
var formData = new FormData();

formData.append(“username”, “Groucho”);  
formData.append(“accountnum”, 123456); //数字123456会被立即转换成字符串 “123456”

// HTML 文件类型input，由用户选择  
formData.append(“userfile”, fileInputElement.files\[0\]);

// JavaScript file-like 对象  
var content = ‘**hey!**’; // 新文件的正文…  
var blob = new Blob(\[content\], \{ type: “text/xml”\});

formData.append(“webmasterfile”, blob);

var request = new XMLHttpRequest();  
request.open(“POST”, “[http://foo.com/submitform.php][http_foo.com_submitform.php]“);  
request.send(formData);  
注意：字段 “userfile” 和 “webmasterfile” 都包含一个文件. 字段 “accountnum” 是数字类型，它将被FormData.append()方法转换成字符串类型(FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File，则会被转换成字符串类)。  
上面的示例创建了一个FormData实例，包含”username”, “accountnum”, “userfile” 和 “webmasterfile”四个字段，然后使用XMLHttpRequest的send()方法发送表单数据。字段 “webmasterfile” 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。  
通过HTML表单创建FormData对象  
想要构造一个包含Form表单数据的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));  
你还可以在创建一个包含Form表单数据的FormData对象之后和发送请求之前，附加额外的数据到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上传文件。使用的时候需要在表单中添加一个文件类型的input：

Your email address:  
Custom file label:  
File to stash:

然后使用下面的代码发送请求：  
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.

[http_foo.com_submitform.php]: http://foo.com/submitform.php