HTML5 Form Data 对象的使用
2016-07-13 17:33
831 查看
XMLHttpRequest Level 2 添加了一个新的接口——FormData
XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比,使用 FormData的最大优点就是我们可以异步上传二进制文件。 创建一个FormData对象
你可以先创建一个空的
注:字段 "userfile" 和 "webmasterfile" 的值都包含了一个文件。通过
"accountnum" 的数字被自动转换为字符(字段的值可以是一个
在该例子中,我们创建了一个名为 oMyForm 的 FormData对象,该对象中包含了名为"username","accountnum","userfile" 以及 "webmasterfile" 的字段名,然后使用
字段的值不是一个字符串,还是一个
可以用一个已有的 form元素来初始化
例如:
你还可以在已有表单数据的基础上,继续添加新的键值对,如下:
你可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送.
你还可以使用
然后你就可以使用下面的代码来异步的上传用户所选择的文件:
你还可以不借助 HTML 表单,直接向
如果 FormData对象中的某个字段值是一个
HTTP 请求时,代表该
你还可以使用 jQuery 来发送
桌面端:
移动端:
参考文献:
MDN:使用 XMLHttpRequest
MDN:XMLHttpRequest
FormData
XMLHttpRequest
2 新技巧
MDN:使用
FormData对象
W3C:XMLHttpRequest
Level 2
。利用 FormData
对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用
XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比,使用 FormData的最大优点就是我们可以异步上传二进制文件。 创建一个FormData对象
你可以先创建一个空的
FormData对象,然后使用
append()方法向该对象里添加字段,如下:
FormData.append()方法赋给字段
"accountnum" 的数字被自动转换为字符(字段的值可以是一个
Blob对象,
File对象或者字符串,剩下其他类型的值都会被自动转换成字符串)。
在该例子中,我们创建了一个名为 oMyForm 的 FormData对象,该对象中包含了名为"username","accountnum","userfile" 以及 "webmasterfile" 的字段名,然后使用
XMLHttpRequest的
send()方法把这些数据发送了出去。"webmasterfile"
字段的值不是一个字符串,还是一个
Blob对象。
使用HTML表单来初始化一个FormData对象
可以用一个已有的 form元素来初始化 FormData对象,只需要把这个
form元素作为参数传入
FormData构造函数即可:
使用FormData对象发送文件
你还可以使用 FormData来发送二进制文件.首先在 HTML 中要有一个包含了文件输入框的 form元素:
FormData对象中添加一个
File对象或者一个
Blob对象:
Blob对象,则在发送
HTTP 请求时,代表该
Blob对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同,Firefox使用了固定的字符串"blob",而 Chrome 使用了一个随机字符串。
你还可以使用 jQuery 来发送
FormData,但必须要正确的设置相关选项:
浏览器兼容性
桌面端: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) | ? | ? | ? |
MDN:使用 XMLHttpRequest
MDN:XMLHttpRequest
FormData
XMLHttpRequest
2 新技巧
MDN:使用
FormData对象
W3C:XMLHttpRequest
Level 2
相关文章推荐
- CDH5.0.2升级至CDH5.2.0
- CDH5安装
- HTML5进阶段内联标签汇总(小篇)
- HTML5进阶段内联标签汇总(小篇)
- 2、HTML5新标签和新属性
- 在Html5中与服务器交互
- 30分钟做一个二维码名片应用,有源码!
- H5本地存储
- html5加载视频video积累
- html5移动Web开发实战
- 关于HTML5
- HTML5中的数据存储localStorage和sessionStorage
- HTML5 Plus 拍照或者相册选择图片上传
- html5的常用函数
- html5 postMessage解决跨域、跨窗口消息传递
- HTML5中表单元素常用的属性设置
- HTML5中input标签新增的类型
- HTML5中的音频和视频播放
- Xcode运行HTML5代码
- H5中的地图定位