HTML5 Form Data 对象的使用
HTML5 Form Data 对象的使用
XMLHttpRequest Level 2 添加了一个新的接口——FormData。
利用 FormData 对象,
我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。
创建一个FormData对象
你可以先创建一个空的 FormData
对象,然后使用 append()
方法向该对象里添加字段,如下:
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
构造函数即可:
var newFormData = new FormData(someFormElement);
例如:
var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));
你还可以在已有表单数据的基础上,继续添加新的键值对,如下:
var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);
你可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送.
使用FormData对象发送文件
你还可以使用 FormData
来发送二进制文件.首先在 HTML 中要有一个包含了文件输入框的 form 元素
<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>
然后你就可以使用下面的代码来异步的上传用户所选择的文件:
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
对象:
data.append("myfile", myBlob);
如果 FormData 对象中的某个字段值是一个 Blob
对象,则在发送 HTTP 请求时,代表该 Blob
对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同,Firefox使用了固定的字符串"blob",而 Chrome 使用了一个随机字符串。
你还可以使用 jQuery 来发送 FormData,但必须要正确的设置相关选项:
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) | ? | ? | ? |
参考文献:
- MDN:使用 XMLHttpRequest
- MDN:XMLHttpRequest FormData
- XMLHttpRequest 2 新技巧
- MDN:使用 FormData 对象
- W3C:XMLHttpRequest Level 2
转载于:https://www.cnblogs.com/gaoxue/p/3824683.html
HTML5 Form Data 对象的使用相关推荐
- Web 前沿——HTML5 Form Data 对象的使用(转)
XMLHttpRequest Level 2 添加了一个新的接口--FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...
- Web前沿—HTML5 Form Data 对象的使用
XMLHttpRequest Level 2 添加了一个新的接口--FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...
- Web 前沿——HTML5 Form Data 对象的使用
XMLHttpRequest Level 2 添加了一个新的接口--FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...
- php form 上传_php+html5使用FormData对象提交表单及上传图片的方法
本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一 ...
- PHP结合HTML5使用FormData对象提交表单及上传图片
FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的 ...
- http协议的Request Payload 和 Form Data 的区别
Request Payload VS Form Data 前端请求 我看了前端发起的请求,请求正文并不是我熟悉的 Form Data,而是 Request Payload.如图注意下面两个请求的 Co ...
- Vue-resource中post请求将data数据以request payload转换为form data的形式
今天在做项目的时候 需要往api中发送一个json格式的对象,但是怎么改都不行,当然,使用的vue 的 http方法. 而且,开始使用时 vue-resource中post请求时的一个坑,vue-re ...
- flux读取不到数据_WebFlux 中form data获取不到参数问题
Spring WebFlux 中, request.queryParams 只能获取到 查询参数, 对于 form 提交的参数无法进行参数自动装载 处理方式有两种: 一. 自定义 ArgumentRe ...
- python 爬虫 Form Data爬取穷游网的数据
数据 以穷游网郑州市的旅游景点为例 请求方式 分页的时候,是向同一个url发请求,不同的是Form Data里的page参数 参考代码 #!/usr/bin/env python # -*- codi ...
- java request payload_前后端联调之Form Data与Request Payload,你真的了解吗?
前言 做过前后端联调的小伙伴,可能有时会遇到一些问题.例如,我明明传递数据给后端了,后端为什么说没收到呢?这时候可能就会就会有小伙伴陷入迷茫,本文从chrome-dev-tools(F12调试器)中看 ...
最新文章
- 编程自动化,未来机器人将超越人类?
- 曾经的全国重点大学,如今表现如何?2020年最新排名出炉!
- 基于keepalived对redis做高可用配置---转载
- python事件触发机制_Python3-事件驱动、IO模型和触发方式
- Linux软件安装之RPM的安装技巧
- JUnit3 一次运行多个测试类和进行多次重复测试:使用测试套件和RepeatedTest
- Javascript创建对象的几种方式?
- 编写程序,随机产生20个0到1之间的数,将这20个数写入文本文件中,要求每行5个数
- 今天终于结束了考试,不知道结果
- Failed to start The nginx HTTP and reverse proxy server
- mt管理器小白破解之路-基础篇第一课
- 使用layui的laypage完成分页
- 无刷直流电机计算转速
- Java中获取当天的0点时间和明天的0点时间
- pdf加页码java_Java 添加页码到PDF文档
- 缘起和性空-佛教对自然的看法(转载整理)
- html左侧悬浮音乐插件,固定在网页底部的HTML5音乐播放器插件代码
- 某注册页面存在手机短信验证码绕过
- 安装 Swoole教程
- 微信服务商特约商户入驻接口(提交申请单)示例DEMO-java版
热门文章
- 【算法原理+洛谷P6114+HDU6761】Lyndon分解
- Genius ACM(倍增+归并排序)
- 人脸识别-YOLOv5模型目标检测
- 利用tensorFlow api 识别手术器械
- opc服务器的时间怎么修改,OPC服务器是否允许在其逻辑中使用源时间戳?(Is OPC server allowed to use source timestamp in its logic?)...
- mysql的空白值mac,Mac下mysql安装启动遇到的坑,及数据库常用指令
- 极客大学架构师训练营、区块链、数字货币、以太坊、Libra、联盟链 第28课 听课总结
- Amazon AWS创建Elastic Beanstalk,部署Tomcat,配置MySQL,发布Spring Boot应用
- linux中检测到时钟错误,make: 警告:检测到时钟错误。您的创建可能是不完整的
- java jar包 资源_一个小坑:java如何访问依赖jar包中的资源文件