Web 前沿——HTML5 Form Data 对象的使用

您可能感兴趣的相关文章

创建一个FormData对象

　　你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var
 oMyForm =new
 FormData();

oMyForm.append("username","Groucho");

oMyForm.append("accountnum", 123456);// 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件

oMyForm.append("userfile", fileInputElement.files[0]);

var
 oFileBody ="<a id="a"><b id="b">hey!</b></a>";// Blob对象包含的文件内容

var
 oBlob =new
 Blob([oFileBody], { type:"text/xml"});

oMyForm.append("webmasterfile", oBlob);

var
 oReq =new
 XMLHttpRequest();

oReq.open("POST","
http://foo.com/submitform.php");

oReq.send(oMyForm);

　　注：字段 "userfile" 和 "webmasterfile" 的值都包含了一个文件。通过 FormData.append() 方法赋给字段 "accountnum" 的数字被自动转换为字符（字段的值可以是一个 Blob 对象，File对象或者字符串，剩下其他类型的值都会被自动转换成字符串）。

　　在该例子中，我们创建了一个名为 oMyForm 的 FormData 对象，该对象中包含了名为"username"，"accountnum"，"userfile" 以及 "webmasterfile" 的字段名，然后使用XMLHttpRequest的 send() 方法把这些数据发送了出去。"webmasterfile" 字段的值不是一个字符串,还是一个 Blob 对象。

使用HTML表单来初始化一个FormData对象

　　可以用一个已有的 form 元素来初始化 FormData 对象，只需要把这个 form 元素作为参数传入 FormData 构造函数即可：


1

var
 newFormData =new
 FormData(someFormElement);

　　例如：


1

2

3

4

var
 formElement = document.getElementById("myFormElement");

var
 oReq =new
 XMLHttpRequest();

oReq.open("POST","submitform.php");

oReq.send(new
 FormData(formElement));

　　你还可以在已有表单数据的基础上，继续添加新的键值对，如下：


1

2

3

4

var
 formElement = document.getElementById("myFormElement");

formData =new
 FormData(formElement);

formData.append("serialnumber", serialNumber++);

oReq.send(formData);

　　你可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送.

使用FormData对象发送文件

　　你还可以使用 FormData 来发送二进制文件.首先在 HTML 中要有一个包含了文件输入框的 form 元素：


1

2

3

4

5

6

7

8

9

10

<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 />

</form>

<div id="output"></div>

<a href="javascript:sendForm()">Stash the file!</a>

　　然后你就可以使用下面的代码来异步的上传用户所选择的文件：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

function
 sendForm() {

var
 oOutput = document.getElementById("output");

var
 oData =new
 FormData(document.forms.namedItem("fileinfo"));

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 uploading your file.<br \/>";

}

};

oReq.send(oData);

}

　　你还可以不借助 HTML 表单，直接向 FormData 对象中添加一个 File 对象或者一个 Blob 对象：


1

data.append("myfile", myBlob);

　　如果 FormData 对象中的某个字段值是一个 Blob 对象，则在发送 HTTP 请求时，代表该 Blob 对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同，Firefox使用了固定的字符串"blob"，而 Chrome 使用了一个随机字符串。

　　你还可以使用 jQuery 来发送 FormData，但必须要正确的设置相关选项：


1

2

3

4

5

6

7

8

9

var
 fd =new
 FormData(document.getElementById("fileinfo"));

fd.append("CustomField","This is some extra data");

$.ajax({

url:"stash.php",

type:"POST",

data: fd,

processData:false, // 告诉jQuery不要去处理发送的数据

contentType:false  
 // 告诉jQuery不要去设置Content-Type请求头

});

浏览器兼容性

　　桌面端：

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 7+ 4.0 (2.0) 10+ 12+ 5+
支持filename参数 (Yes) 22.0 (22.0) ? ? ?

　　移动端：

Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 ? 4.0 (2.0) ?
12+

 ?
支持filename参数 ? ? 22.0 (22.0) ? ? ?

参考文献：

时间： 2024-10-13 10:47:59

Web 前沿——HTML5 Form Data 对象的使用的相关文章

Web 前沿——HTML5 Form Data 对象的使用（转）

XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. 您可能感兴趣的相关文章 10大流行 Metro UI Bootstrap 主题和模板 精选12款优秀 jQuery Ajax 分页插件

mark--[Web 前沿——HTML5 Form Data 对象的使用]

XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. 您可能感兴趣的相关文章 10大流行 Metro UI Bootstrap 主题和模板 精选12款优秀 jQuery Ajax 分页插件

HTML5 Form Data 对象的使用

HTML5 Form Data 对象的使用 MDN: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单.与普通的 Ajax 相比,

HT for Web的HTML5树组件延迟加载技术实现

HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间,让页面的加载更加流畅,增强用户体验. 进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5树组件显示系统文件目录结构. 首先,我们先来设计下服务器,这次Demo的服务器采用Node.js,用到了Node.js的express.so

Vue-resource中post请求将data数据以request payload转换为form data的形式

今天在做项目的时候 需要往api中发送一个json格式的对象,但是怎么改都不行,当然,使用的vue 的 http方法. 而且,开始使用时 vue-resource中post请求时的一个坑,vue-resource中post发送的数据默认以request payload的形式,而一般我们使用的都是form data的形式. 后来发现,只需要在main.js中加入: Vue.http.options.emulateJSON = true; Vue.http.options.headers = { '

ASP.NET WEB开发6大内置对象

ASP.NET  WEB开发6大内置对象 ASP.NET 内置对象包括 1.Response 2.Request  3.Server  4.Application   5.Session   6.Cookie 1  Request对象主要是让服务器取得客户端浏览器的一些数据,包括从HTML表单用Post或者GET方法传递的参数.Cookie和用户认证. 2 Request对象是Page对象的成员之一. 3 程序中不需要做任何的声明即可直接使用:其类名为 HttpRequest属性很多,但方法很少

表单提交数据格式form data

前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交表单方法,js代码如下: submitForm() { let data = 'title="标题"&content="内容"&pic[]="image1"&pic[]="image2"&pic[]

HT for Web基于HTML5的图像操作（二）

上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数,通过颜色乘积实现的染色效果,本文将再次介绍另一种更为高效的实现方式,当然要实现的功能效果是完全一样的.这次我们依然基于HTML5技术,但采用Canvas的globalCompositeOperation属性进行各种blending效果: 各种globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/W

AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式

HTTP请求中,假设是get请求,那么表单參数以name=value&name1=value1的形式附到url的后面,假设是post请求,那么表单參数是在请求体中,也是以name=value&name1=value1的形式在请求体中.通过chrome的开发人员工具能够看到例如以下(这里是可读的形式,不是真正的HTTP请求协议的请求格式): get请求: RequestURL:http://127.0.0.1:8080/test/test.do?name=mikan&address=