FormData对象
FormData对象是HTML5中新增的一个对象。它能使现在的AJAX交互更加简单。之前的AJAX在上传前,需要将表单的数据序列化,即jQuery中serialize;包括异步上传文件也需要写一大坨“看起来没那么必要 ”的东西。FormData能够简化这些步骤,使AJAX的数据发送变得简单清晰许多 。
FormData有三种用法,一种是创建全新的FormData对象:
var
formData =
new
FormData();
一种是获取form表单的FormData对象:
var
form = document.getElementById(
"form1"
);
var
formData =
new
FormData(form );
或者通过form的getFormData方法:
var
form = document.getElementById(
"form1"
);
var
formData = form.getFormData();
获取FormData对象后,还需要向其内部插入数据,目前只能使用append:
//参数:(name,value);
formData.append(
"pwd"
,
"123456"
);
当将本地数据添加完毕后,可以通过ajax的send方法传送到服务器。
var
xhr =
new
XMLHttpRequest();
xhr.send(formData);
当然FormData并不兼容,这是司徒正美提供的一个兼容的 FormData代码:https://gist.github.com/lemonhall/3120320
FormData在异步上传文件上会更加省事:
var
files = fileInput.files;
var
formData =
new
FormData();
//将所有文件插入formData
for
(
var
i=0; i<files.length; i++) {
formData.append(fileInput.name, files[i]);
}
var
xhr =
new
XMLHttpRequest();
//即可上传
xhr.send(formData);
非常简单却非常实用的一个对象。