170531、FormData 对象的使用
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同
1、如何创建一个FormData对象EDIT
你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样: var formData = new FormData();
formData.append("username", "Groucho");
// 数字 123456 会被立即转换成字符串 "123456"
formData.append("accountnum", 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, File,
或者 string: 如果它的字段类型不是Blob也不是File,则会被转换成字符串类型。 上面的示例创建了一个FormData实例,包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段,然后使用XMLHttpRequest的send()方法发送表单数据。
字段 "webmasterfile" 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。
File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。
2、通过HTML表单创建FormData对象EDIT
想要构造一个包含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); 这样你就可以在发送请求之前自由地附加不一定是用户编辑的字段到表单数据里.
3、使用FormData对象上传文件EDIT
你还可以使用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> 然后使用下面的代码发送请求: 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"); 使用appned()方法时,可以通过第三个可选参数设置发送请求的头 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对象EDIT
170531、FormData 对象的使用的更多相关文章
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)
/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...
- HTML的FormData对象
FormData是HTML5标准制定的一个新的封装对象,有了FormData对象,可以方便地通过javascript创建表单数据,直接以ajax发送到服务器中. 目前浏览器的支持情况为: 详细的介绍与 ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- FormData对象
FF4中增加了一个很有意思的对象,FormData.通常我们提交(使用submit button)时,会把form中的所有表格元素的name与value组成一个queryString,提交到后台.这用 ...
- Ajax发送FormData对象封装的表单数据
前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- 使用JS的FormData对象
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
随机推荐
- apt-get强制使用Ipv4
sudo apt-get -o Acquire::ForceIPv4=true update 永久解决办法: 创建文件 /etc/apt/apt.conf.d/99force-ipv4 加入代码: A ...
- Maven中央仓库——你可能不知道的细节
地址 —— 目前来说,http://repo1.maven.org/maven2/是真正的Maven中央仓库的地址,该地址内置在Maven的源码中,其它地址包括著名的ibiblio.org,都是镜像. ...
- linux -- Ubuntu下安装和配置Apache2
在Ubuntu中安装apache 安装指令:sudo apt-get install apache2 启动和停止apache的文件是:/etc/init.d/apache2 启动命令:sudo apa ...
- Ubuntu telnet
首先在Ubuntu中安装xinetd(它是inetd替代品): sudo apt-get install xinetd 再安装telnetd,在Ubuntu中没有telnetd这个软件包,它是包含在i ...
- 单例模式(singleton pattern)--------创造型模式
缺点: 1.单例模式没有抽象层,单例模式的扩展较困那(开闭原则) 2.单例类的职责过重,既提供了业务方法,又提供了创建对象的方法,将对象的创建和对象本身的功能耦合在一起(违反单一职责原则,但是似乎又无 ...
- mysql数据库不能远程访问的问题
1.先暂停防火墙,检查是不是防火墙的问题. 2. 如若不是防火墙的问题,则可能是用户权限的问题. 这里创建一个用户来用于远程连接:首先登陆你的mysql数据库 命令: mysql -uroot -p ...
- 总结ASP.NET C#中经常用到的13个JS脚本代码
1.按钮前后台事件 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click ...
- Chrome浏览器无法观看视频,一直提示“adobe flash player 已过期” ?
很多新用户在安装了Chrome浏览器或者更新过的的时候,经常提示“ adobe flash player 已过期”的问题,反复提示,导致无法观看视频.于是从网上也找了很多办法都没有解决.这里给大 ...
- android:json解析的两个工具:Gson和Jackson的使用小样例
1.简单介绍 json是android与server通信过程中经常使用的数据格式,比如.例如以下是一个json格式的字符串: {"address":"Nanjing&qu ...
- mybatis由浅入深day01_8.2resultMap
8.2 resultMap mybatis中使用resultMap完成高级输出结果映射. resultType可以指定pojo将查询结果映射为pojo,但需要pojo的属性名和sql查询的列名一致方可 ...