简单的 JavaScript 表单处理与 FormData 参数介绍

Question

XMLHttpRequest level  2 增加了新的参数 FormData 接口的支持。 参数 FormData 对象提供了一种方法来轻松地构建一组键/值对表示表单字段及其值，然后可以使用 XMLHttpReques t的 send() 方法在 multipart/form-data 的格式很容易地发送。

什么是 FormData 参数？

当你想将一组复杂的数据从一个网页（文件、非ASCII编码的内容）发送到服务器，则必须使用 multipart/form-data 内容类型。 要设置内容类型的 <form> ，你应该这样写：

<form method="post" enctype="multipart/form-data">
<input type="file" name="media"/>
<input name="nickname"/>
<input name="website"/>
<input type="submit" value="upload"/>
</form>

这就是我们平时做的要上传文件的表单。 使用 Firefox 3.6 开始，你可以使用 JavaScript 操作文件，也许你想使用 XMLHttpRequest 发送文件。 但如果你想复制这种形式，这真的很难，因为你必须创建 multipart/form-data 内容在自己的 JavaScript。 这是参数 formdata 是有用的，重现 <form> 提交机制在 JavaScript 中。

FormData 对象

该参数的 formdata 对象允许您编写了一组键/值对的使用 XMLHttpRequest 发送。 这个对象只有一个方法：

append(key, value);

其中 key 是你的值的名称，并在 value 可以是字符串或文件。 您可以创建一个参数 formdata 对象，然后追加具体的值，然后通过 XMLHttpRequest 的发送数据。 如果你要模拟上面的形式，你可以这样写：

// aFile could be from an input type="file" or from a Dragged'n Dropped file
var formdata = new FormData();
formdata.append("nickname", "Foooobar"); 
formdata.append("website", "http://hacks.mozilla.org");
formdata.append("media", aFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://foo.bar/upload.php");  
xhr.send(formdata);

参数 formdata 和 <form> 元素

Firefox 的扩展 HTML 表单元素，增加一个 getFormData() 方法，可以让你获取表单的数据作为参数 formdata 对象。 这是 HTML 标准尚未一部分，但预计将被添加到该规范在将来的某个时候（尽管可能使用不同的名称）：

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

您也可以将数据添加到参数 formdata 对象从表单取回并发送它的，就像这样：

var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

这使您可以增强表单的数据以及在发送之前，包括附加信息，这不是一定的用户可编辑的表格上。