【译】使用FormData对象

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 = ‘<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()方法自动转为字符串。(字段值可以是一个BlobFile或字符串,若值不是Blob、File之一,就会被转为字符串

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

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

要用现有的<form>元素建立一个FormData对象,可以在建立FormData对象时传入指定的<form>元素。

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>元素建立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对象发送文件,只需在你的<form>标签间包含一个file类型的<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);

注意:若你传入了一个表单的引用,那么表单指定的方法(译注:应指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

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12219878.html

时间: 2024-10-03 22:28:10

【译】使用FormData对象的相关文章

通过jQuery Ajax使用FormData对象上传文件

转自:http://www.cnblogs.com/labnizejuly/p/5588444.html FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file"

FormData 对象的使用

XMLHttpRequest Level 2 添加了一个新的接口-- FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单,通过FormData对象可以组装一组用 XmlHttpRequest 发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过Fo

HTML的FormData对象

FormData是HTML5标准制定的一个新的封装对象,有了FormData对象,可以方便地通过javascript创建表单数据,直接以ajax发送到服务器中. 目前浏览器的支持情况为: 详细的介绍与用法可参考我的github笔记

【简译】jQuery对象的奥秘:基础介绍

本文翻译自此文章 你有没有遇到过类似$(".cta").click(function(){})这样的JavaScript代码并且在想“$('#x')是什么”?如果这些对你想天书一样,请往下读.如果你认为这些代码不可能是真的,请浏览一些jQuery例子,他们都是这种结构. 这篇文章覆盖了像下面一样吓人的代码片段中涉及的关键概念.我们以一个长例子开始,这个长例子是基于一个让一个正方形运动的简单例子(a simple example of animating a square).你可能不需要

利用html5的FormData对象实现多图上传

有两种实现方式: 1.可以使用form的方式实现. html代码如下: <body> <form enctype="multipart/form-data" id="inputForm1" modelAttribute="bankAdminist" action="" method="post" class="form-horizontal"> <div c

FormData对象

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

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收 说明FormData对象既可以打包发送表单的数据,也可以手动append数据 注意,input Dom对象有一个files属性 十一哥文件数组 **/ <!doctype html> <html> <head&

JS FormData对象

想得到一个FormData对象: var formdata = new FormData(); W3c草案提供了三种方案来获取或修改FormData. 方案1:创建一个空的FormData对象,然后再用append方法逐个添加键值对: var formdata = new FormData(); formdata.append("name", "呵呵"); formdata.append("url", "http://www.baidu

[javascript] FormData 对象

闲来无事,本喵喜欢回顾写过的项目代码,希望能写的更精简.说简单点就是瞎折腾 [- - |||] 在 vue 项目中基于 axios 配置了 http 的 get 和 post 请求方法,这是其中的 post 方法: 1 /* ... */ 2 static httpPost(url, params) { 3 let token = store.getters.token; 4 let formData = params; 5 if (!(params instanceof FormData))