怎么在JavaScript中使用FormData对象

　　介绍

怎么在JavaScript中使用FormData对象?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强> FormData的主要用途有两个:

1,将形式表单元素的名称与值进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。

2,异步上传文件

一、创建FormData对象

1,创建一个空对象:

//通过FormData构造函数创建一个空对象　　var formdata=https://www.yisu.com/zixun/new formdata ();//可以通过append()方法来追加数据　　formdata.append(“名字”,“laotie”);//通过得到方法对值进行读取　　console.log (formdata.get (" name ");//laotie//通过集方法对值进行设置　　formdata.set(“名字”,“老刘”); 　　console.log (formdata.get (" name ");//老刘

2,通过表单对formData进行初始化

创建表单:

& lt; form id=癮dvForm"比; 　　& lt;才能p>广告名称:& lt; input 类型=皌ext", name=癮dvName",价值=https://www.yisu.com/zixun/"细细">

广告类别:<选择name=" advType "> 　　<选项值=" 1 ">轮播图　　<选项值=" 2 ">轮播图底部广告　　<选项值=3>热门回收广告　　<选项值=" 4 ">优品精选广告　　

通过表单元素作为参数,实现对formData的初始化:

//获得表单按钮元素　　var btn=document.querySelector (“# btn");//为按钮添加点击事件　　btn.onclick=function () {//根才能据ID获得页面当中的形式表单元素　　var 才能;形式=document.querySelector (“# advForm");//将才能获得的表单元素作为参数,对formData进行初始化　　var 才能;formdata=https://www.yisu.com/zixun/new formdata(形式);//通过得到方法获得的名字为advName元素值的值　　console.log (formdata.get (“advName”));//细细//通过得到方法获得的名字为advType元素值的值　　console.log (formdata.get (“advType”));//1 　　}

二,操作方法

1,通过得到(关键)与getAll(键)来获取相对应的值

//,获取关键为年龄的第一个值　　formdata.get (“age");, 　　,//获取关键为年龄的所有值,返回值为数组类型　　formdata.getAll (“age");

2,通过append(键值)在数据末尾追加数据

//通过FormData构造函数创建一个空对象　　var formdata=https://www.yisu.com/zixun/new formdata ();//通过append()方法在末尾追加键为名称值为老刘的数据　　formdata.append(“名字”,“老刘”);//通过append()方法在末尾追加键为名称值为laoli的数据　　formdata.append(“名字”,“laoli”);//通过append()方法在末尾追加键为名称值为laotie的数据　　formdata.append(“名字”,“laotie”);//通过得到方法读取键为名称的第一个值　　console.log (formdata.get (" name ");//老刘//通过getAll方法读取键为名称的所有值　　console.log (formdata.getAll (" name ");//(“老刘”、“laoli”、“laotie”)

3,通过集(键值)来设置修改数据

键的值不存在,会添加一条数据

//通过FormData构造函数创建一个空对象　　var formdata=https://www.yisu.com/zixun/new formdata ();//如果关键的值不存在会为数据添加一个键为名称值为老刘的数据　　formdata.set(“名字”,“laoli”);//通过得到方法读取键为名称的第一个值　　console.log (formdata.get (" name ");//laoli 　　关键的值存在,会修改对应的价值值//通过FormData构造函数创建一个空对象　　var formdata=new formdata ();//通过append()方法在末尾追加键为名称值为老刘的数据　　formdata.append(“名字”,“老刘”);//通过append()方法在末尾追加键为名称值为laoliu2的数据　　formdata.append(“名字”,“laoliu2”);//通过得到方法读取键为名称的第一个值　　console.log (formdata.get (" name ");//老刘//通过getAll方法读取键为名称的所有值　　console.log (formdata.getAll (" name ");//(“老刘”、“laoliu2”)//将存在的键为名称的值修改为laoli 　　formdata.set(“名字”,“laoli”);//通过得到方法读取键为名称的第一个值　　console.log (formdata.get (" name ");//laoli//通过getAll方法读取键为名称的所有值　　console.log (formdata.getAll (" name ");//(“laoli”)