使用FormData对象

  • 版本网址缩略名: DOM/XMLHttpRequest/FormData/Using_FormData_Objects
  • 版本标题: Using FormData Objects
  • 版本 id: 342479
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论

修订内容

利用FormData对象,你可以用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".

Creating a FormData object from scratch

你可以创建一个空的FormData对象,然后使用append()方法向该对象里添加字段,如下:

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"

// HTML file input user's choice...
oMyForm.append("userfile", fileInputElement.files[0]);

// JavaScript file-like object...
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // the body of the new file...
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);
Note: The fields "userfile" and "webmasterfile" contain both a file. The number assigned to the field "accountnum" is immediately converted into a string by the FormData.append() method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string: if neither, the value is converted to a string).

This example builds a FormData instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the XMLHttpRequest method send() to send the form's data. The field "webmasterfile" is a Blob. A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system. In order to build a Blob you can invoke the Blob constructor.

使用HTML表单来初始化一个FormData对象

可以用一个已有的{{ HTMLElement("form") }}元素来初始化FormData对象,只需要把这个form元素作为参数传入FormDate构造函数:

var newFormData = new FormData(someFormElement);

例如:

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

你还可以在已有表单数据的基础上,继续添加新的键值对,如下:

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

This lets you augment the form's data before sending it along, to include additional information that's not necessarily user editable on the form.

Sending files using a FormData object

You can also send files using FormData. Simply include an {{ HTMLElement("input") }} element of type "file":

<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 />
</form>
<div id="output"></div>
<a href="javascript:sendForm()">Stash the file!</a>

Then you can send it using code like the following:

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.<br \/>";
    }
  };

  oReq.send(oData);
}

Note that this example is directing the output to a Perl CGI script running on the server, and handles HTTP errors, although not prettily.

You can also append a {{ domxref("File") }} or {{ domxref("Blob") }} directly to the {{ domxref("XMLHttpRequest/FormData", "FormData") }} object, like this:

data.append("myfile", myBlob);

When using a {{ domxref("Blob") }}, the filename reported to the server in the HTTP "Content-Disposition" header is browser-specific; Firefox uses simply "blob," while Chrome uses a random string, for example.

You can also use FormData with jQuery if you set the right options:

var fd = new FormData(document.getElementById("fileinfo"));
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
});

修订版来源

<p>利用<a href="/zh-CN/DOM/XMLHttpRequest/FormData" title="zh-CN/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>对象,你可以用一系列的键值对来模拟一个完整的表单,然后使用<code>XMLHttpRequest</code>发送这个"表单".Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data".</p>
<h2 id="Creating_a_FormData_object_from_scratch">Creating a FormData object from scratch</h2>
<p>你可以创建一个空的<code>FormData</code>对象,然后使用<a href="../../../../../zh-cn/DOM/XMLHttpRequest/FormData#append%28%29" title="zh-cn/XMLHttpRequest/FormData#append()"><code>append()</code></a>方法向该对象里添加字段,如下:</p>
<pre class="brush: js">
var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"

// HTML file input user's choice...
oMyForm.append("userfile", fileInputElement.files[0]);

// JavaScript file-like object...
var oFileBody = "&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;"; // the body of the new file...
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);
</pre>
<div class="note">
  <strong>Note:</strong> The fields "userfile" and "webmasterfile" contain both a file. The number assigned to the field "accountnum" is immediately converted into a string by the <a href="/zh-CN/DOM/XMLHttpRequest/FormData#append()" title="zh-CN/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string: <strong>if neither, the value is converted to a string</strong>).</div>
<p>This example builds a <code>FormData</code> instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the <code>XMLHttpRequest</code> method <a href="/zh-CN/DOM/XMLHttpRequest#send()" title="zh-CN/XMLHttpRequest#send()"><code>send()</code></a> to send the form's data. The field "webmasterfile" is a <a href="/zh-CN/DOM/Blob" title="zh-CN/DOM/Blob"><code>Blob</code></a>. A <a href="/zh-CN/DOM/Blob" title="zh-CN/DOM/Blob"><code>Blob</code></a> object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on <a href="/zh-CN/DOM/Blob" title="zh-CN/DOM/Blob"><code>Blob</code></a>, inheriting blob functionality and expanding it to support files on the user's system. In order to build a <a href="/zh-CN/DOM/Blob" title="zh-CN/DOM/Blob"><code>Blob</code></a> you can invoke the <a href="/zh-CN/DOM/Blob#Constructor" title="zh-CN/DOM/Blob#Constructor"><code>Blob</code> constructor</a>.</p>
<h2 id=".E4.BD.BF.E7.94.A8HTML.E8.A1.A8.E5.8D.95.E6.9D.A5.E5.88.9D.E5.A7.8B.E5.8C.96.E4.B8.80.E4.B8.AAFormData.E5.AF.B9.E8.B1.A1">使用HTML表单来初始化一个FormData对象</h2>
<p>可以用一个已有的{{ HTMLElement("form") }}元素来初始化<code>FormData对象</code>,只需要把这个<code>form</code>元素作为参数传入<code>FormDate</code>构造函数:</p>
<pre class="brush: js">
var newFormData = new FormData(someFormElement);
</pre>
<p>例如:</p>
<pre class="brush: js">
var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));
</pre>
<p>你还可以在已有表单数据的基础上,继续添加新的键值对,如下:</p>
<pre class="brush: js">
var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);</pre>
<p>This lets you augment the form's data before sending it along, to include additional information that's not necessarily user editable on the form.</p>
<h2 id="Sending_files_using_a_FormData_object">Sending files using a FormData object</h2>
<p>You can also send files using <code>FormData</code>. Simply include an {{ HTMLElement("input") }} element of type "file":</p>
<pre class="brush: html">
&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
  &lt;label&gt;Your email address:&lt;/label&gt;
  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
  &lt;label&gt;Custom file label:&lt;/label&gt;
  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
  &lt;label&gt;File to stash:&lt;/label&gt;
  &lt;input type="file" name="file" required /&gt;
&lt;/form&gt;
&lt;div id="output"&gt;&lt;/div&gt;
&lt;a href="javascript:sendForm()"&gt;Stash the file!&lt;/a&gt;
</pre>
<p>Then you can send it using code like the following:</p>
<pre class="brush: js">
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.&lt;br \/&gt;";
    }
  };

  oReq.send(oData);
}
</pre>
<p>Note that this example is directing the output to a Perl CGI script running on the server, and handles HTTP errors, although not prettily.</p>
<p>You can also append a {{ domxref("File") }} or {{ domxref("Blob") }} directly to the {{ domxref("XMLHttpRequest/FormData", "FormData") }} object, like this:</p>
<pre class="brush: js">
data.append("myfile", myBlob);
</pre>
<p>When using a {{ domxref("Blob") }}, the filename reported to the server in the HTTP "Content-Disposition" header is browser-specific; Firefox uses simply "blob," while Chrome uses a random string, for example.</p>
<p>You can also use <code>FormData</code> with jQuery if you set the right options:</p>
<pre class="brush: js">
var fd = new FormData(document.getElementById("fileinfo"));
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
});
</pre>
恢复到这个版本