介绍 var fd=new FormData ();
fd.append (“name",“脚本之家“);
fd.append (“blog",“http://jb51.net");
fd.append (“file" . getelementbyid (“file")); . ajax({美元
url:“http://jb51.net"
类型:& # 39;文章# 39;
数据:fd,/* *
*必须假才会自动加上正确的内容类型
*/contentType:假的,/* *
*必须假才会避开jQuery对formdata的默认处理
* XMLHttpRequest会对formdata进行正确的处理
*/processData:假
(结果){}).done(功能
console.log(结果);
}). fail(函数(err) {
console.log(错);
}); & lt; PHP ?//php接收表单提交信息并打印
如果收取($ _REQUEST[& # 39;做# 39;])){
var_dump ($ _REQUEST);
带有_file美元var_dump ();
die ();
}
比;
& lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title> FormData测试- jb51.net
& lt;脚本src=癶ttp://libs.baidu.com/jquery/2.0.0/jquery.min.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;形式id=癴orm"祝辞
& lt;输入类型=癴ile"name=癴ile"id=癴ile"/比;
& lt;输入类型=皌ext"name=皀ame"id=?“值=敖疟局摇?/比;
& lt;输入类型=皌ext"name=癰log"id=?“值=癶ttp://jb51.net"/比;
& lt;输入类型=皊ubmit"name=癲o"id=癲o"值=皊ubmit"/比;
& lt;/form>
& lt; script>
$ (“form")。submit(函数(e) {
e.preventDefault ();//空对象然后添加
var fd=new FormData ();
fd.append (“name",“脚本之家“);
fd.append (“blog",“http://jb51.net");
fd.append (“file" . getelementbyid (“file"));//fd.append (“file", $ (“: file") [0] .files [0]);//jQuery方式
fd.append (“do",“submit");//通过表单对象创建FormData
var fd=new FormData (. getelementbyid (“form"));//var fd=new FormData($(“形式:情商(0)“)[0]);//jquery方式//XMLHttpRequest原生方式发送请求
var xhr=new XMLHttpRequest ();
xhr.open (“POST",““,真正的);
xhr.send (fd);
xhr。onload=function (e) {
如果这一点。状态==200){
警报(this.responseText);
};
};
返回;//jQuery方式发送请求
. ajax({美元
类型:“post",//url:““,
数据:fd,
processData:假的,
contentType:假
}).done(函数(res) {
console.log (res);
});
返回错误;
});
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章将为大家详细讲解有关使用PHP和HTML5 FormData实现无刷新文件上传的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造iframe方式实现。
在HTML5中提供了一个FormData对象API,通过FormData可以方便地构造一个表单请求,并通过XMLHttpRequest来发送。通过FormData对象发送文件也是可以的,如此则无刷新上传就变的非常简单了。
那么FormData怎么使用呢?下面脚本之家对此进行简单的介绍。
<强> 1。构造FormData对象
想得到一个FormData对象,很简单:
var fd=new FormData ();
FormData对象只提供了一个方法添加,用于向对象中添加表单请求参数。
在当前主流浏览器中,可通过如下两种方式获取或修改FormData。
方法一:创建一个空的FormData对象,然后再用附加方法逐个添加键值对。示例:
这种方法可以不需要的HTML表单对象存在。
方法二:取得表单元素对象,将它作为参数传入FormData对象中示。例:
var formobj=. getelementbyid (“form"); var fd=new FormData (formobj);
当然,这里还可以使用附加方法继续向fd中添加其他参数。
<强> 2。FormData发送请求
得到FormData对象了,如何发送请求呢? FormData对象主要用于增强型的XMLHttpRequest对象的发送方法中。参考如下示例:
var xhr=new XMLHttpRequest ();
xhr.open (“POST"“http://jb51.net",真正的);
xhr.send (fd);
xhr。onload=function (e) {
如果这一点。状态==200){
警报(this.responseText);
}
}; <强> 3。jquery中使用FormData
在jquery ajax的方法中,也可使用FormData方式实现无刷新上传。但要注意参数的设置,参考如下:
<强> 4。一个完整的示例(包含PHP处理示例):
