【译】使用FormData对象

jayce 发布于2019-08-01 17:11 / 1787人阅读

摘要：用表单中创建一个对象要用现有的元素建立一个对象，可以在建立对象时传入指定的元素。通过提交表单和发送文件而不使用对象若你想了解如何基于进行序列化和发送表单操作，而不使用对象，可阅读此文。

系列文章说明

原文

FormData对象能让你生成一系列用于XMLHttpRequest发送的键值对。它主要的目的在于发送表单数据，但也能独立用于传输有键形式的数据。其传输的数据格式和表单使用submit()方法、且编码类型为multipart/form-data所发送的数据格式相同。

从头开始创建一个FormData对象

你可以自己建立一个FormData对象，首先进行实例化、再通过apppend()方法来添加字段，如下所示：

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字123456会自动转为字符串"123456"

// 用户选择的HTML的文件提交
formData.append("userfile", fileInputElement.files[0]);

// JavaScript的类文件对象（Blob）
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");
request.send(formData);

注意：“userfile”字段和“webmasterfile”字段都包含了文件。“accountnum”字段中的数字会自动被FormData.append()方法自动转为字符串。（字段值可以是一个Blob、File或字符串，若值不是Blob、File之一，就会被转为字符串）

上面的例子建立了一个包含名为“username”、“accountnum”、“userfile”和“webmasterfile”字段的FormData对象。然后使用了XMLHttpRequest的send()方法来发送表单数据。“webmasterfile”字段是个Blob对象，该对象代表了一个由不可变的、原始数据组成的类文件对象，里面的的数据不必使用JavaScript的原生数据类型。File对象也是基于Blob对象的，它继承了Blob的基本功能并做了拓展以支持用户操作系统上的文件。要建立一个Blob对象，你可以使用Blob构造函数。

用HTML表单中创建一个FormData对象

要用现有的

元素建立一个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));

在用元素建立FromData对象之后、发送它之前，也可以给它添加额外的数据，如下：

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对象发送文件，只需在你的标签间包含一个file类型的元素：


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

  oReq.send(oData);
  ev.preventDefault();
}, false);

注意：若你传入了一个表单的引用，那么表单指定的方法（译注：应指Post、Get）会覆盖open()方法调用时指定的。

你也可以直接添加File或Blob到FormData对象，如下：

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

使用append()方法时，使用第三个可选的参数会指定一个文件名，用于请求头的Content-Disposition字段。若没有指定文件名（或者该参数不被支持），那就默认使用“blob”这个名字。

通过AJAX提交表单和发送文件而不使用FormData对象

若你想了解如何基于AJAX进行序列化和发送表单操作，而不使用FormData对象，可阅读此文。

参见

Using XMLHttpRequest
HTMLFormElement
Blob
Typed Arrays

云服务器 GPU云服务器 formdata formdata上传文件对象存储怎么使用 jsp 对象使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51009.html

【译】使用FormData对象

摘要：用表单中创建一个对象要用现有的元素建立一个对象，可以在建立对象时传入指定的元素。通过提交表单和发送文件而不使用对象若你想了解如何基于进行序列化和发送表单操作，而不使用对象，可阅读此文。系列文章说明原文 FormData对象能让你生成一系列用于XMLHttpRequest发送的键值对。它主要的目的在于发送表单数据，但也能独立用于传输有键形式的数据。其传输的数据格式和表单使用sub...

maochunguang 2019-08-20 18:02 评论0 收藏0
【译】通过JavaScript发送表单

摘要：能异步地发送任意数据的技术称为，表示异步的和。若你使用，使用发送表单还会影响同源策略，并导致内容被发送到一个无法访问的中。但要手动发送二进制数据的话，还有很多额外工作要做。用来发送二进制是很直接的，使用方法就好了。系列文章说明原文在[发送表单数据]()一文中，HTML表单可以声明式地发送一个HTTP请求。但表单也可以用JavaScript来准备一个HTTP请求。本文将探索如何...

chinafgj 2019-08-20 17:52 评论0 收藏0
【译】通过JavaScript发送表单

摘要：能异步地发送任意数据的技术称为，表示异步的和。若你使用，使用发送表单还会影响同源策略，并导致内容被发送到一个无法访问的中。但要手动发送二进制数据的话，还有很多额外工作要做。用来发送二进制是很直接的，使用方法就好了。系列文章说明原文在[发送表单数据]()一文中，HTML表单可以声明式地发送一个HTTP请求。但表单也可以用JavaScript来准备一个HTTP请求。本文将探索如何...

qylost 2019-08-01 17:07 评论0 收藏0
面试宝典

摘要：有谈谈面试与面试题对于前端面试的一些看法。动态规划算法的思想及实现方法帮大家理清动态规划的解决思路以及原理方法前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。极客学院前端练习题道练习题，面试季练练手。由数据绑定和排序引入的几个 JavaScript 知识点在 JavaScript 的数据绑定和做简单的表格排序中遇到的几个知识点 [[JS 基础...

neu 2019-08-29 14:00 评论0 收藏0
【译】fetch用法说明

摘要：实例生成以后，可以用方法分别指定方法和方法的回调函数。创建一个对象异步操作成功方法可以接受两个回调函数作为参数。第一个回调函数是对象的状态变为时调用，第二个回调函数是对象的状态变为时调用。由于 FetchAPI 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程本文章内容推荐阅读 MDN Fetch 教程语法说明 fetch(u...

30e8336b8229 2019-08-20 11:20 评论0 收藏0