FormData是什么
FormData是什么
一、总结
一句话总结:利用 FormData 对象,可以通过JavaScript键值对来模拟一系列表单控件,还可以使用 XMLHttpRequest的send() 方法来异步提交表单。
与普通的Ajax相比,使用FormData 的最大优点就是可以异步上传二进制文件。
1、FormData 对象如何使用?
可以先通过new关键字创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段(字段的值可以是一个 Blob 对象,File对象或者字符串,剩下其他类型的值都会被自动转换成字符串)。
也可以用一个已有的form元素来初始化FormData对象
var formdata = new FormData();
formdata.append("name", "Alice");
formdata.append("id", 30); // 数字30被转换成字符串"30"
2、如何使用已有的form元素来初始化FormData对象?
用一个已有的form元素来初始化FormData对象,只需把该 form 元素作为参数传入 FormData 构造函数即可:
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php");
xhr.send(new FormData(myForm));
3、serialize()可以序列化表单数据,那么表单中的二进制数据能被序列化成字符串么?
serialize()可以序列化表单数据,但表单中的二进制数据不能被序列化成字符串。通过html5的FormData对象对带有二进制数据的表单进行构造,然后通过ajax发送这个构造好的FormData就可以实现异步提交了。
4、JavaScript Ajax的同义词是什么?
XMLHttpRequest
使用 JavaScript Ajax(XMLHttpRequest)来异步发送 FormData:
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4)
if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
alert(xhr.responseText);
}
xhr.send(new FormData(myForm));
5、 jQuery Ajax如何发送 FormData?
在data数据那里写上formdata
使用 jQuery Ajax来发送 FormData:
var formdata = new FormData(document.getElementById("myForm"));
$.ajax({
url: "dealing.php",
type: "POST",
data: formdata,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
});
二、浅谈HTML5的FormData对象
利用 FormData 对象,可以通过JavaScript键值对来模拟一系列表单控件,还可以使用 XMLHttpRequest的send() 方法来异步提交表单。
与普通的Ajax相比,使用FormData 的最大优点就是可以异步上传二进制文件。
可以先通过new关键字创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段(字段的值可以是一个 Blob 对象,File对象或者字符串,剩下其他类型的值都会被自动转换成字符串)。
1、可以使用HTML表单来初始化一个FormData对象
serialize()可以序列化表单数据,但表单中的二进制数据不能被序列化成字符串。通过html5的FormData对象对带有二进制数据的表单进行构造,然后通过ajax发送这个构造好的FormData就可以实现异步提交了。
用一个已有的form元素来初始化FormData对象,只需把该 form 元素作为参数传入 FormData 构造函数即可:
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php");
xhr.send(new FormData(myForm));
可以在已有表单数据的基础上,继续向 FormData 对象添加新的键值对:
var myForm = document.getElementById("myForm");
formdata = new FormData(myForm);
formdata.append("number", number);
oReq.send(formData);
2、可以不借助表单,直接向 FormData 对象添加一个 Blob 对象,File对象或者字符串:
var formdata = new FormData();
formdata.append("name", "Alice");
formdata.append("id", 30); // 数字30被转换成字符串"30"
formdata.append("userfile", selectedFile.files[0]); // selectedFile中包含用户所选择的文件
var file = "<a>link!</a>"; // Blob对象包含的文件内容
var blob = new Blob([file], {type: "text/xml"});
formdata.append("file", blob);
var xhr = new XMLHttpRequest();
xhr.open("POST", "dealing.php");
xhr.send(formdata);
关于Blob的介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/63684834
3、使用FormData对象发送文件:
1) 使用 JavaScript Ajax(XMLHttpRequest)来异步发送 FormData:
var myForm = document.getElementById("myForm");
var xhr= new XMLHttpRequest();
xhr.open("POST", "dealing.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4)
if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)
alert(xhr.responseText);
}
xhr.send(new FormData(myForm));
2) 使用 jQuery Ajax来发送 FormData:
var formdata = new FormData(document.getElementById("myForm"));
$.ajax({
url: "dealing.php",
type: "POST",
data: formdata,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
});
https://blog.csdn.net/zhouziyu2011/article/details/70738667
FormData是什么的更多相关文章
- 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...
- form表单中enctype="multipart/form-data"的作用
在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- multipart/form-data和application/x-www-form-urlencoded的区别
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urle ...
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- form表单编码方式设置为multipart/form-data,后台参数出现乱码情况
一般在上传图片过程中,form中的编码方式一般采用multipart/form-data方式编码,但是后台这取参数时,可能会出现乱码情况:这里后台要采用转换编码方式: 页面: 后台:获取表单元素时,
- jquery 通过ajax FormData 对象上传附件
之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div> 流程图: <input id=& ...
- html5 formData上传 针对app端
function uploadFile() { if ((document.getElementById("file").files[0].size / 1024).toFixed ...
- H5的FormData对象完成ajax上传文件multiFile
最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...
- formData上传图片
---------------------formData上传图片--------------------- <form id="imageform"> <img ...
随机推荐
- Random numbers
Most computer programs do the same thing every time they execute, given the same inputs, so they are ...
- Square roots
Loops are often used in programs that compute numerical results by starting with an approximate answ ...
- SpringMVC后台使用对象接受参数字符串转日期
在springMVC配置文件中加入: <bean id="dateConvert" class="com.iomp.util.DateConvert"/& ...
- 海量的超赞 Linux 软件 (转载)
海量的超赞 Linux 软件 作者: VoLuong 译者: LCTT Mo | 2016-08-24 16:01 评论: 27 收藏: 38 这个仓库收集了对任何用户/开发者都超赞的 Linux ...
- caffe(9) caffe例子
为了程序的简洁,在caffe中是不带练习数据的,因此需要自己去下载.但在caffe根目录下的data文件夹里,作者已经为我们编写好了下载数据的脚本文件,我们只需要联网,运行这些脚本文件就行了. 注意: ...
- iOS——集成支付宝 private key is NULL
问题描述:将生成的私钥,写进官方demo,还是一直报错:rsa_private read error : private key is NULL 解决方案:需要将RSA私钥转换成PKCS8格式
- iOS开发—— UIImage数据的保存
1.保存图片和方向 [userDefault setObject:UIImagePNGRepresentation(image) forKey:udUserImage]; [userDefault s ...
- 首家5G体验厅在深圳建成
日前,深圳移动卓越时代营业厅推出5G全方位体验活动,让市民亲身感受5G时代到来.据悉,十大5G展示项目生动展现移动5G带来的生活巨变与产业升级,为5G发展汇聚各界力量加速创新落地. 现场有市民表示,5 ...
- ubuntu -redis
ubentu 布置redis,基本操作和CentO感觉相差不多,主要是使用命令有所差异 mark如下: ① download ② tar -zxvf xxx.tar.gz ③ cd redis-xxx ...
- 洛谷 P1352 没有上司的舞会 (树上不相邻点权和最大)
一颗树,选取不相邻的点,求最大点权值 因为当前结点选或不选后后效性,所以我们加一唯来取消后效性 表示以i为根的树且i不选的最大价值 表示以i为根的树且i选的最大价值 显然有 #include<c ...