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请求头
});
 
参考:浅谈HTML5的FormData对象 - CSDN博客
https://blog.csdn.net/zhouziyu2011/article/details/70738667
 
 
 
 
 
 

FormData是什么的更多相关文章

  1. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  2. form表单中enctype="multipart/form-data"的作用

    在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...

  3. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  4. multipart/form-data和application/x-www-form-urlencoded的区别

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明:  application/x-www-form-urle ...

  5. H5 FormData对象的使用

    XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...

  6. form表单编码方式设置为multipart/form-data,后台参数出现乱码情况

    一般在上传图片过程中,form中的编码方式一般采用multipart/form-data方式编码,但是后台这取参数时,可能会出现乱码情况:这里后台要采用转换编码方式: 页面: 后台:获取表单元素时,

  7. jquery 通过ajax FormData 对象上传附件

    之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div>   流程图: <input id=& ...

  8. html5 formData上传 针对app端

    function uploadFile() { if ((document.getElementById("file").files[0].size / 1024).toFixed ...

  9. H5的FormData对象完成ajax上传文件multiFile

    最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...

  10. formData上传图片

    ---------------------formData上传图片--------------------- <form id="imageform"> <img ...

随机推荐

  1. Random numbers

    Most computer programs do the same thing every time they execute, given the same inputs, so they are ...

  2. Square roots

    Loops are often used in programs that compute numerical results by starting with an approximate answ ...

  3. SpringMVC后台使用对象接受参数字符串转日期

    在springMVC配置文件中加入: <bean id="dateConvert" class="com.iomp.util.DateConvert"/& ...

  4. 海量的超赞 Linux 软件 (转载)

    海量的超赞 Linux 软件 作者: VoLuong 译者: LCTT Mo | 2016-08-24 16:01   评论: 27 收藏: 38 这个仓库收集了对任何用户/开发者都超赞的 Linux ...

  5. caffe(9) caffe例子

    为了程序的简洁,在caffe中是不带练习数据的,因此需要自己去下载.但在caffe根目录下的data文件夹里,作者已经为我们编写好了下载数据的脚本文件,我们只需要联网,运行这些脚本文件就行了. 注意: ...

  6. iOS——集成支付宝 private key is NULL

    问题描述:将生成的私钥,写进官方demo,还是一直报错:rsa_private read error : private key is NULL 解决方案:需要将RSA私钥转换成PKCS8格式

  7. iOS开发—— UIImage数据的保存

    1.保存图片和方向 [userDefault setObject:UIImagePNGRepresentation(image) forKey:udUserImage]; [userDefault s ...

  8. 首家5G体验厅在深圳建成

    日前,深圳移动卓越时代营业厅推出5G全方位体验活动,让市民亲身感受5G时代到来.据悉,十大5G展示项目生动展现移动5G带来的生活巨变与产业升级,为5G发展汇聚各界力量加速创新落地. 现场有市民表示,5 ...

  9. ubuntu -redis

    ubentu 布置redis,基本操作和CentO感觉相差不多,主要是使用命令有所差异 mark如下: ① download ② tar -zxvf xxx.tar.gz ③ cd redis-xxx ...

  10. 洛谷 P1352 没有上司的舞会 (树上不相邻点权和最大)

    一颗树,选取不相邻的点,求最大点权值 因为当前结点选或不选后后效性,所以我们加一唯来取消后效性 表示以i为根的树且i不选的最大价值 表示以i为根的树且i选的最大价值 显然有 #include<c ...