无刷新文件上传是一个常见而又有点复杂的问题，常见的解决方案是构造 iframe 方式实现。
在 html5 中提供了一个 formdata 对象 api，通过 formdata 可以方便地构造一个表单请求，并通过 xmlhttprequest 来发送。通过 formdata 对象发送文件也是可以的，如此则无刷新上传就变的非常简单了。
那么 formdata 怎么使用呢？下面硕编程对此进行简单的介绍。
1. 构造 formdata 对象
想得到一个formdata对象，很简单：
var fd = new formdata();
formdata 对象只提供了一个方法 append ，用于向对象中添加表单请求参数。
在当前主流浏览器中，可通过如下两种方式获取或修改formdata。
方法一：创建一个空的formdata对象，然后再用append方法逐个添加键值对。示例：
var fd = new formdata();
fd.append("name", "硕编程");
fd.append("blog", "http://jb51.net");
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 对象主要用于增强型的 xmlhttprequest 对象的 send 方法中。参考如下示例：
var xhr = new xmlhttprequest();
xhr.open("post" ,"http://jb51.net" , true);
xhr.send(fd);
xhr.onload = function(e) {
if (this.status == 200) {
alert(this.responsetext);
}
};
3. jquery 中使用 formdata
在 jquery 的 ajax 方法中，也可使用 formdata 方式实现无刷新上传。但要注意参数的设置，参考如下：
$.ajax({
url: "http://jb51.net",
type: 'post',
data: fd,
/**
*必须false才会自动加上正确的content-type
*/
contenttype:false,
/**
* 必须false才会避开jquery对 formdata 的默认处理
* xmlhttprequest会对 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>
<meta charset="utf-8">
<title>formdata test - jb51.net</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</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://jb51.net" />
<input type="submit" name="do" id="do" value="submit" />
</form>
<script>
$("form").submit(function(e){
e.preventdefault();
//空对象然后添加
var fd = new formdata();
fd.append("name", "硕编程");
fd.append("blog", "http://jb51.net");
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 方式
//xmlhttprequest 原生方式发送请求
var xhr = new xmlhttprequest();
xhr.open("post" ,"" , true);
xhr.send(fd);
xhr.onload = 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;
});
</script>
</body>
</html>
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！