FormData

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

修订内容

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

想要更详细的了解如何使用FormData对象, 请查看使用FormData对象.

构造函数

new FormData (optional HTMLFormElement form)

参数

form
(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

append()

给当前FormData对象添加一个键/值对.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);
参数值
name
字段名称.
value
字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
filename
(可选) 指定文件的文件名,当value参数被指定为一个{{ domxref("Blob") }}对象或者一个{{ domxref("File") }}对象时,该文件名会被发送到服务器上,对于{{domxref("Blob")}}对象来说,这个值默认为"blob".

注:如果你将一个{{ domxref("Blob") }}对象作为字段值添加到一个FormData对象中,则在使用Ajax将这个FormData对象提交到服务器上时,提交数据中代表对应文件的文件名的"Content-Disposition"字段的值可能会因浏览器的不同而不同,规范中规定为"blob",Gecko早期实现版本中为空字符串,查看下面的Gecko附注.

浏览器兼容性

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 7+ {{ CompatGeckoDesktop("2.0") }} 10+ 12+ 5+
支持filename参数 {{CompatVersionUnknown}} {{ CompatGeckoDesktop("22.0") }} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 {{ CompatUnknown() }} {{ CompatGeckoMobile("2.0") }} {{ CompatUnknown() }}

12+

{{ CompatUnknown() }}
支持filename参数 {{CompatUnknown}} {{ CompatUnknown() }} {{ CompatGeckoDesktop("22.0") }} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

Gecko附注

在Gecko 7.0 {{ geckoRelease("7.0") }}之前,如果你将{{ domxref("Blob") }}对象作为数据添加到一个FormData对象中,则在使用Ajax将这个FormData对象提交到服务器上时,所发送的HTTP请求头中代表那个Blob对象所包含文件的文件名称的"Content-Disposition"请求头的值会是一个空字符串,这会引发某些服务器程序上的错误.从Gecko 7.0开始,这种情况下发送的文件名称改为"blob"这个字符串.

规范

相关链接

修订版来源

<p>XMLHttpRequest Level 2添加了一个新的接口<code>FormData</code>.利用<code>FormData对象</code>,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的<a href="../../../DOM/XMLHttpRequest#send%28%29" title="zh-CN/XMLHttpRequest#send()"><code>send()</code></a>方法来异步的提交这个"表单".比起普通的ajax,使用<code>FormData</code>的最大优点就是我们可以异步上传一个二进制文件.</p>
<p>想要更详细的了解如何使用<code>FormData</code>对象, 请查看<a href="../../../../zh-CN/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="zh-CN/DOM/XMLHttpRequest/FormData/Using_FormData_objects">使用FormData对象</a>.</p>
<h2 id="Syntax" name="Syntax">构造函数</h2>
<pre class="syntaxbox">
<code>new FormData (optional </code><code>HTMLFormElement form</code><code>)</code></pre>
<h3 id="Parameters" name="Parameters">参数</h3>
<dl>
  <dt>
    <code>form</code></dt>
  <dd>
    (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.</dd>
</dl>
<h2 id=".E6.96.B9.E6.B3.95">方法</h2>
<h3 id="append()">append()</h3>
<p>给当前<code>FormData对象添加一个键/值对</code>.</p>
<pre>
void <a href="/zh-CN/DOM/XMLHttpRequest/FormData#append()" title="zh-CN/DOM/XMLHttpRequest/FormData#append()">append</a>(DOMString name, Blob value, optional DOMString filename);
void <a href="/zh-CN/DOM/XMLHttpRequest/FormData#append()" title="zh-CN/DOM/XMLHttpRequest/FormData#append()">append</a>(DOMString name, DOMString value);</pre>
<h6 id=".E5.8F.82.E6.95.B0.E5.80.BC">参数值</h6>
<dl>
  <dt>
    <code>name</code></dt>
  <dd>
    字段名称.</dd>
  <dt>
    <code>value</code></dt>
  <dd>
    字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.</dd>
  <dt>
    <code>filename</code></dt>
  <dd>
    (可选) 指定文件的文件名,当<code>value</code>参数被指定为一个{{ domxref("Blob") }}对象或者一个{{ domxref("File") }}对象时,该文件名会被发送到服务器上,对于{{domxref("Blob")}}对象来说,这个值默认为"blob".</dd>
</dl>
<div class="note">
  <p><strong>注:</strong>如果你将一个{{ domxref("Blob") }}对象作为字段值添加到一个<code>FormData</code>对象中,则在使用Ajax将这个<code>FormData</code>对象提交到服务器上时,提交数据中代表对应文件的文件名的"Content-Disposition"字段的值可能会因浏览器的不同而不同,规范中规定为"blob",Gecko早期实现版本中为空字符串,查看下面的Gecko附注.</p>
</div>
<h2 id=".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>7+</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>10+</td>
        <td>12+</td>
        <td>5+</td>
      </tr>
      <tr>
        <td>支持<code>filename</code>参数</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{ CompatGeckoDesktop("22.0") }}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>3.0</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("2.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>
          <p>12+</p>
        </td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>支持<code>filename</code>参数</td>
        <td>{{CompatUnknown}}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("22.0") }}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko.E9.99.84.E6.B3.A8">Gecko附注</h3>
<p>在Gecko 7.0 {{ geckoRelease("7.0") }}之前,如果你将{{ domxref("Blob") }}对象作为数据添加到一个<code>FormData</code>对象中,则在使用Ajax将这个<code>FormData</code>对象提交到服务器上时,所发送的HTTP请求头中代表那个<code>Blob</code>对象所包含文件的文件名称的"Content-Disposition"请求头的值会是一个空字符串,这会引发某些服务器程序上的错误.从Gecko 7.0开始,这种情况下发送的文件名称改为"blob"这个字符串.</p>
<h2 id="Specification" name="Specification">规范</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata" title="http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata">W3C Specification</a></li>
  <li><a href="http://xhr.spec.whatwg.org/#interface-formdata" title="http://xhr.spec.whatwg.org/#interface-formdata">WHATWG Specification</a></li>
</ul>
<h2 id=".E7.9B.B8.E5.85.B3.E9.93.BE.E6.8E.A5">相关链接</h2>
<ul>
  <li>{{domxref("XMLHTTPRequest")}}</li>
  <li><a href="/zh-CN/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="zh-CN/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
  <li><a href="/zh-CN/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="zh-CN/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
  <li>{{HTMLElement("Form")}}</li>
</ul>
恢复到这个版本