HTML5 -- FormData
博客专区 > airmount 的博客 > 博客详情
HTML5 -- FormData
airmount 发表于3年前
HTML5 -- FormData
  • 发表于 3年前
  • 阅读 133
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: FormData对象是HTML5中新增的一个对象。它能使现在的AJAX交互更加简单。之前的AJAX在上传前,需要将表单的数据序列化,即jQuery中serialize;包括异步上传文件也需要写一大坨“看起来没那么必要 ”的东西。FormData能够简化这些步骤,使AJAX的数据发送变得简单清晰许多 。

FormData对象是HTML5中新增的一个对象。它能使现在的AJAX交互更加简单。之前的AJAX在上传前,需要将表单的数据序列化,即jQuery中serialize;包括异步上传文件也需要写一大坨“看起来没那么必要 ”的东西。FormData能够简化这些步骤,使AJAX的数据发送变得简单清晰许多 。

FormData有三种用法,一种是创建全新的FormData对象:

1
var formData = new FormData();

一种是获取form表单的FormData对象:

1
2
var form = document.getElementById("form1");
var formData = new FormData(form );

或者通过form的getFormData方法:

1
2
var form = document.getElementById("form1");
var formData = form.getFormData();

获取FormData对象后,还需要向其内部插入数据,目前只能使用append:

1
2
//参数:(name,value);
formData.append("pwd","123456");

当将本地数据添加完毕后,可以通过ajax的send方法传送到服务器。

1
2
3
var xhr = new XMLHttpRequest();
xhr.open('GET'," http://localhost/",true);
xhr.send(formData);

当然FormData并不兼容,这是司徒正美提供的一个兼容的 FormData代码:https://gist.github.com/lemonhall/3120320

FormData在异步上传文件上会更加省事:

1
2
3
4
5
6
7
8
9
10
11
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.open('POST'," http://localhost/ajaxload/test.php",true);
//即可上传
xhr.send(formData);

非常简单却非常实用的一个对象。 

共有 人打赏支持
粉丝 3
博文 2
码字总数 0
×
airmount
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: