FormData 对象的使用

﹏ヽ暗。殇╰゛Y 2022-05-30 05:11 196阅读 0赞

# FormData 对象的使用 #

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同

## 如何创建一个FormData对象 ##

你可以自己创建一个FormData对象，然后通过调用它的[`append()`][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 = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
    var blob = new Blob([content], {  type: "text/xml"});
    
    formData.append("webmasterfile", blob);
    
    var request = new XMLHttpRequest();
    request.open("POST", "http://foo.com/submitform.php");
    request.send(formData);

注意：字段 "userfile" 和 "webmasterfile"  都包含一个文件. 字段 "accountnum" 是数字类型，它将被 `FormData.append()`方法转换成字符串类型( `FormData` 对象的字段类型可以是  [`Blob`][Blob],  [`File`][File], 或者 string:  如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。

上面的示例创建了一个`FormData`实例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段，然后使用`XMLHttpRequest`的[`send()`][send]方法发送表单数据。字段 "webmasterfile" 是 [`Blob`][Blob]类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 [`File`][File] 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 [`Blob()`][Blob 1] 构造函数创建一个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：

<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对象是通过表单创建的，则表单中指定的请求方式会被应用到方法open()中 。

你还可以直接向FormData对象附加File或Blob类型的文件，如下所示：

data.append("myfile", myBlob, "filename.txt");

使用append()方法时，可以通过第三个可选参数设置发送请求的头 `Content-Disposition `指定文件名。如果不指定文件名（或者不支持该参数时），将使用名字“blob”。

如果你设置正确的配置项，你也可以通过jQuery来使用FormData对象：

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,  // 不处理数据
      contentType: false   // 不设置内容类型
    });

## 通过AJAX提交表单和上传文件可以不使用FormData对象 ##

如果你想知道不使用FormData对象的情况下，通过[AJAX][]序列化和提交表单 [请点击这里][Link 1]。

## 相关链接 ##

*  [Using XMLHttpRequest][]
 *  [`HTMLFormElement`][HTMLFormElement]
 *  [`Blob`][Blob]
 *  [Typed Arrays][]

## 文档标签和贡献者 ##

标签：

*  [AJAX][AJAX 1] 
 *  [Blob][Blob 2] 
 *  [File][File 1] 
 *  [FormData][] 
 *  [Forms][] 
 *  [XHR][] 
 *  [XMLHttpRequest][]

此页面的贡献者：  [tyw2015][],  [TYPE-O56][],  [ziv.zjc][]

最后编辑者:  [tyw2015][], Dec 12, 2017, 12:04:10 AM

[append]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append
[Blob]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
[File]: https://developer.mozilla.org/zh-CN/docs/Web/API/File
[send]: https://developer.mozilla.org/en/DOM/XMLHttpRequest#send%28%29
[Blob 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
[AJAX]: https://developer.mozilla.org/en-US/docs/AJAX
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files
[Using XMLHttpRequest]: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
[HTMLFormElement]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement
[Typed Arrays]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
[AJAX 1]: https://developer.mozilla.org/zh-CN/docs/tag/AJAX
[Blob 2]: https://developer.mozilla.org/zh-CN/docs/tag/Blob
[File 1]: https://developer.mozilla.org/zh-CN/docs/tag/File
[FormData]: https://developer.mozilla.org/zh-CN/docs/tag/FormData
[Forms]: https://developer.mozilla.org/zh-CN/docs/tag/Forms
[XHR]: https://developer.mozilla.org/zh-CN/docs/tag/XHR
[XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/tag/XMLHttpRequest
[tyw2015]: https://developer.mozilla.org/zh-CN/profiles/tyw2015
[TYPE-O56]: https://developer.mozilla.org/zh-CN/profiles/TYPE-O56
[ziv.zjc]: https://developer.mozilla.org/zh-CN/profiles/ziv.zjc

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 FormData 对象的使用

MDN 解释 FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，亦可用于发送带键数据(keyed

╰半夏微凉°/ 2023年08月17日 17:16/ 0 赞/ 120 阅读

相关 JS FormData对象

摘要通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说

快来打我*/ 2022年08月08日 00:45/ 0 赞/ 200 阅读

相关使用FormData

FormData可以利用AJAX技术进行上传文件 / HTML中/ 上传文件<input type = 'file' id = "UploadFile" ac

骑猪看日落/ 2022年07月13日 06:22/ 0 赞/ 208 阅读

相关 HTML5中FormData对象的使用

FormData对象是HTML5的一个对象，目前的已经可以兼容一些主流的浏览器。当然了，如果你的项目还需要兼容IE8之类的低版本浏览器，这个好用的方法注定与你无缘啦。（不过你可

我就是我/ 2022年06月16日 03:27/ 0 赞/ 242 阅读

相关 FormData 对象的使用

FormData 对象的使用通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 05:11/ 0 赞/ 197 阅读

相关 JS-FormData对象使用

前言 FormData 对象用来保存key/value结构的数据，通常用于from传输数据，也可以独立于form使用，用来传输密钥数据。例子 1.创建FormD

迷南。/ 2022年05月20日 07:20/ 0 赞/ 226 阅读

相关 JavaScript的FormData对象

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使

秒速五厘米/ 2022年05月12日 06:56/ 0 赞/ 215 阅读

相关 formData和blob 对象

formdata FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利，上传二进制

落日映苍穹つ/ 2022年04月15日 06:07/ 0 赞/ 323 阅读

相关使用FormData对象

使用FormData对象 TABLE OF CONTENTS 1. `` `` 2. [创建一个FormData对象][FormData]``````

叁歲伎倆/ 2021年10月01日 02:38/ 0 赞/ 370 阅读

相关 FormData对象

FormData对象一、什么是FormData对象二、语法三、express处理formdata对象四、FormData对象实例的方法

以你之姓@/ 2021年09月07日 06:12/ 0 赞/ 423 阅读