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 ...
随机推荐
- Classes and functions
As another example of a user-defined type, we’ll define a class called Time that records the time of ...
- 再谈Ubuntu和CentOS安装好之后的联网问题(桥接和NAT、静态和动态ip)(博主推荐)
不多说,直接上干货! 首先,普及概念. hostonly.桥接和NAT的联网方式 对于CentOS系统,用的最多的就是,NAT和桥接模式 CentOS 6.5静态IP的设置(NAT和桥接联网方式都适用 ...
- jsp输出金字塔
<% String str = ""; for(int i = 1; i <= 5; i++){ for(int j = 1; j <= 5-i; j++){ s ...
- 【DNN控件】
<dnn:DNNDataGrid ID="show" runat="server" DataSourceID="ObjectDataSource ...
- ReactiveCocoa简单使用20例
ReactiveCocoa简单使用20例 1. 观察值变化 你别动,你一动我就知道. //当self.value的值变化时调用Block,这是用KVO的机制,RAC封装了KVO @weakify(se ...
- session 存入 redis
<?php header('content-type:text/html;charset=utf-8'); /* * 更改 session 存储位置及存储方式. */ ini_set('sess ...
- Unity C# 设计模式(二)简单工厂模式
定义: 简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例 ...
- 【Codeforces Round #423 (Div. 2) C】String Reconstruction
[Link]:http://codeforces.com/contest/828/problem/C [Description] 让你猜一个字符串原来是什么; 你知道这个字符串的n个子串; 且知道第i ...
- 修改MySQL默认字符集
今天发现有库级字符集和表级字符集,实验了下发现,库级字符集是该库内表的默认字符集,当创建表时,如果未指定字符集,默认使用该表所属库的字符集.表也可使用不同于所属库的字符集. MySQL对于字符集的指定 ...
- 手动创建DataTable并添加数据
DataTable dt=new DataTable(); DataColumn dc=dt.Columns.Add("OBJECTID",Type.GetType("S ...