首先向大家介绍html5的FormData对象
1. 构造 FormData 对象
想得到一个FormData对象，很简单：
var fd = new FormData();
FormData 对象只提供了一个方法 append ，用于向对象中添加表单请求参数。
在当前主流浏览器中，可通过如下两种方式获取或修改FormData。
方法一：创建一个空的FormData对象，然后再用append方法逐个添加键值对。示例：
var fd = new FormData();
fd.append(\"name\", \"码农教程\");
fd.append(\"blog\", \"http://www.manongjc.com\");
fd.append(\"file\", document.getElementById(\"file\"));
这种方法可以不需要 HTML 的表单对象存在。
方法二：取得form元素对象，将它作为参数传入FormData对象中。示例：
var formobj = document.getElementById(\"form\");
var fd = new FormData(formobj);
当然，这里还可以使用 append 方法继续向 fd 中添加其他参数。
2. FormData 发送请求
得到 FormData 对象了，如何发送请求呢？ FormData 对象主要用于增强型的 HttpRequest 对象的 send 方法中。参考如下示例：
var xhr = new HttpRequest();
xhr.open(\"POST\" ,\"http://www.manongjc.com\" , true);
xhr.send(fd);
xhr. = function(e) {
if (this.status == 200) {
alert(this.responseText);
}
};
3. jquery 中使用 FormData
在 jQuery 的 ajax 方法中，也可使用 FormData 方式实现无刷新上传。但要注意参数的设置，参考如下：
$.ajax({
url: \"http://www.manongjc.com\",
type: \'POST\',
data: fd,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType:false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* HttpRequest会对 formdata 进行正确的处理
*/
processData:false
}).done(function(result){
console.log(result);
}).fail(function(err){
console.log(err);
});
4. 一个完整的示例（包含PHP处理示例）：
<?php
//php 接收表单提交信息并打印
if( isset( $_REQUEST[\'do\']) ){
var_dump($_REQUEST);
var_dump($_FILES);
die();
}
?>
<!DOCTYPE HTML>
<html>
<head>
< charset=\"utf-8\">
< >FormData Test</ >
< src=\"http://libs.baidu.com/jquery/2.0.0/jquery.min.js\"></ >
</head>
<body>
<form id=\"form\">
<input type=\"file\" name=\"file\" id=\"file\" />
<input type=\"text\" name=\"name\" id=\"\" value=\"码农教程\" />
<input type=\"text\" name=\"blog\" id=\"\" value=\"http://www.manongjc.com\" />
<input type=\"submit\" name=\"do\" id=\"do\" value=\"submit\" />
</form>
< >
$(\"form\").submit(function(e){
e.preventDefault();
//空对象然后添加
var fd = new FormData();
fd.append(\"name\", \"码农教程\");
fd.append(\"blog\", \"http://www.manongjc.com\");
fd.append(\"file\", document.getElementById(\"file\"));
//fd.append(\"file\", $(\":file\")[0].files[0]); //jQuery 方式
fd.append(\"do\", \"submit\");
//通过表单对象创建 FormData
var fd = new FormData(document.getElementById(\"form\"));
//var fd = new FormData($(\"form:eq(0)\")[0]); //jquery 方式
// HttpRequest 原生方式发送请求
var xhr = new HttpRequest();
xhr.open(\"POST\" ,\"\" , true);
xhr.send(fd);
xhr. = function(e) {
if (this.status == 200) {
alert(this.responseText);
};
};
return;
//jQuery 方式发送请求
$.ajax({
type:\"post\",
//url:\"\",
data: fd,
processData: false,
contentType: false
}).done(function(res){
console.log(res);
});
return false;
});
</ >
</body>
</html> 继续阅读与本文标签相同的文章
上一篇 :
php 使用html5实现多文件上传
下一篇 :
Puppet：维护运行环境一致性的利器
-
城市数字化后，新一代内生安全系统可全方位保护
2026-05-14栏目： 教程
-
谷歌也来“唱衰”5G，5G手机只会徒增功耗？为何这么说？
2026-05-14栏目： 教程
-
量子信息和量子技术白皮书合肥宣言在中科大发布
2026-05-14栏目： 教程
-
微信悄悄更新一新功能，来看看！
2026-05-14栏目： 教程
-
打破三大运营商垄断，第四大运营商终于来了！
2026-05-14栏目： 教程