使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题，常见的解决方案是构造iframe方式实现。
在HTML5中提供了一个FormData对象API，通过FormData可以方便地构造一个表单请求，并通过XMLHttpRequest来发送。通过FormData对象发送文件也是可以的，如此则无刷新上传就变的非常简单了。
那么FormData怎么使用呢？下面毛票票对此进行简单的介绍。
1.构造FormData对象
想得到一个FormData对象，很简单：
varfd=newFormData();
FormData对象只提供了一个方法append，用于向对象中添加表单请求参数。
在当前主流浏览器中，可通过如下两种方式获取或修改FormData。
方法一：创建一个空的FormData对象，然后再用append方法逐个添加键值对。示例：
varfd=newFormData();
fd.append("name","毛票票");
fd.append("blog","http://jb51.net");
fd.append("file",document.getElementById("file"));
这种方法可以不需要HTML的表单对象存在。
方法二：取得form元素对象，将它作为参数传入FormData对象中。示例：
varformobj=document.getElementById("form");
varfd=newFormData(formobj);
当然，这里还可以使用append方法继续向fd中添加其他参数。
2.FormData发送请求
得到FormData对象了，如何发送请求呢？FormData对象主要用于增强型的XMLHttpRequest对象的send方法中。参考如下示例：
varxhr=newXMLHttpRequest();
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();
}
?>
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>FormDataTest-jb51.net</title>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<formid="form">
<inputtype="file"name="file"id="file"/>
<inputtype="text"name="name"id=""value="毛票票"/>
<inputtype="text"name="blog"id=""value="http://jb51.net"/>
<inputtype="submit"name="do"id="do"value="submit"/>
</form>
<script>
$("form").submit(function(e){
e.preventDefault();
//空对象然后添加
varfd=newFormData();
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
varfd=newFormData(document.getElementById("form"));
//varfd=newFormData($("form:eq(0)")[0]);//jquery方式
//XMLHttpRequest原生方式发送请求
varxhr=newXMLHttpRequest();
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);
});
returnfalse;
});
</script>
</body>
</html>