通过实例来了解FormData对象的方法和属性[原创]原创 收藏


  • :
  • 04-03 14:05
  • :
  • 632次
  • :
  • 0条
  • 1赞

简介本文通过具体的实例来了解和学习FormData对象的相关属性和方法。

本文是站长用自己的理解来解释FormData对象,和其它网站上到处复制来复制去的不太一样,是站长自己对FormData对象的理解。

先来说说什么是FormData:

我们从客房端向服务端提交数据,通过用的就是Form表单,FormData其实就是Form表单向服务端提交的“数据”。

一:FormData对象的创建:

1》:向创建对象一样来创建:

var formData = new FormData();
//用append来添加数据
formData.append("weblink", "www.aijquery.cn");
formData.append("webname", "爱jquery");

//还可以添加file对象,
formData.append("userfile",$("#fileID").get(0).files[0]);

//也可以用blob来动态生成一个文件
var content = '<a href="http://www.aijquery.cn"><b>爱jQuery</b></a>'; 
var blob = new Blob([content],{type:"text/xml"});
formData.append("datafile", blob);

PS:关于blob对象,只要记住它和file对象在使用上差不多就行了,和file对象唯一的不同就是file对象多了个名字,并且file对象的基础就是blob对象,所以两者在使用上没有什么区别。

2》:通过已有的Form来创建获取FormData:

var $form=$("#Form").get(0);//这里是我们页面中的form表单,记得转成js里的dom对象
var formData = new FormData($form); //通过这句就能获得FormData对象了

//可能用get来获取其中的值:
var webname=formData.get("webname");
//如果获取的是checkbox这种多值的项,用getAll:
var check=formData.getAll("checkbox");

二:FormData对象的相关方法:

1》:FormData.append(name,value,filename)  :添加值和数据

说明:通常只用前两个参数就行,name和value分别对应的就是表单里的name和value了;

filename : 这个参数,当我们添加的数据是file对象或者blob对象时,就可以用到这个参数了。用来设置传递给服务器的文件名称。

var formData=new FormData();
formData.append("webname","爱jQuery");
formData.append("weblog",$("file").get(0).files[0],"logo.jpg");

2》:FormData.get(name) // FormData.getAll(name)  : 获取值

上面已经说过,多选框checkbox的值是多项,取值的时候就要用getAll(),另外,我们也可以手动添加个多值的项:

var formData=new FormData();
formData.append("webname","爱jQuery");
formData.append("weblink","aijquery.cn");
formData.append("weblink","www.aijquery.cn");

formData.get("webname");
formData.getAll("weblink");

3》:FormData.set(name,value,filename)  : 修改值

说明:和append一样,通常只用前两个参数就行,如果要修改的name不在,会自动创建!

4》:FormData.delete(name)  : 删除值

说明:不管要删除的的值是否存在,FormData.delete都不会报错。

5》:FormData.has(name) : 返回true/false,表示是否存在某个值:

var formData=new FormData();
formData.has("webname"); //返回 falase
formData.append("webname","爱jQuery");
formData.has("webname"); //返回 true

6》:FormData.keys()  : 返回所有的name值:

var formData=new FormData();
formData.append("name1","value1");
formData.append("name2","value2");

for (var key of formData.keys()) {
   console.log(key); 
}
//输出的结果为:name1  name2

7》:FormData.values()  : 返回所有的value值:

var formData=new FormData();
formData.append("name1","value1");
formData.append("name2","value2");

for (var value of formData.values()) {
   console.log(value); 
}
//输出的结果为:value1  value2

8》:FormData.entries()  : 遍历所有的name/value :

var formData=new FormData();
formData.append("name1","value1");
formData.append("name2","value2");

for (var pair of formData.entries()) {
   console.log(pair[0] +":"+ pair[1]); 
}
//输出的结果为:
name1:value1  
name2:value2

好了,关于FormData对象的所有方法及应用就介绍到这里了,希望能帮助到所有看到这篇文章的朋友们!



您正在找的文章可能是: