使用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>