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. Classes and functions

    As another example of a user-defined type, we’ll define a class called Time that records the time of ...

  2. 再谈Ubuntu和CentOS安装好之后的联网问题(桥接和NAT、静态和动态ip)(博主推荐)

    不多说,直接上干货! 首先,普及概念. hostonly.桥接和NAT的联网方式 对于CentOS系统,用的最多的就是,NAT和桥接模式 CentOS 6.5静态IP的设置(NAT和桥接联网方式都适用 ...

  3. jsp输出金字塔

    <% String str = ""; for(int i = 1; i <= 5; i++){ for(int j = 1; j <= 5-i; j++){ s ...

  4. 【DNN控件】

    <dnn:DNNDataGrid ID="show" runat="server" DataSourceID="ObjectDataSource ...

  5. ReactiveCocoa简单使用20例

    ReactiveCocoa简单使用20例 1. 观察值变化 你别动,你一动我就知道. //当self.value的值变化时调用Block,这是用KVO的机制,RAC封装了KVO @weakify(se ...

  6. session 存入 redis

    <?php header('content-type:text/html;charset=utf-8'); /* * 更改 session 存储位置及存储方式. */ ini_set('sess ...

  7. Unity C# 设计模式(二)简单工厂模式

    定义: 简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例 ...

  8. 【Codeforces Round #423 (Div. 2) C】String Reconstruction

    [Link]:http://codeforces.com/contest/828/problem/C [Description] 让你猜一个字符串原来是什么; 你知道这个字符串的n个子串; 且知道第i ...

  9. 修改MySQL默认字符集

    今天发现有库级字符集和表级字符集,实验了下发现,库级字符集是该库内表的默认字符集,当创建表时,如果未指定字符集,默认使用该表所属库的字符集.表也可使用不同于所属库的字符集. MySQL对于字符集的指定 ...

  10. 手动创建DataTable并添加数据

    DataTable dt=new DataTable(); DataColumn dc=dt.Columns.Add("OBJECTID",Type.GetType("S ...