运用PHP和HTML5FormData实现无刷新文件上传-
无刷新文件上传是一个常见而又有点复杂的题目,常见的解决方案是结构 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处置示例):
FormData Test - jb51.net 打赏