new FormData()

2024-01-30 21:03:45 作者:欧亿体育

一、新建formData对象

1、创建空formData对象

// 直接通过new来创建new FormData()
const formdata=new FormData();
//append()方法增加数据
formdata.append("name","zhangsan");
//get方法获取数据
console.log(formdata.get("name"));// zhangsan
//set方法修改数据,如不存在键,会自动加上
formdata.set("name","lisi");
console.log(formdata.get("name"));//lisi

2、示例
html:


js:

planChange(event) {
    let uploadInput = document.getElementById('planFile');
    if (event.target.files && event.target.files[0]) {
      const file = event.target.files[0];
      const formDatas = new FormData();
      formDatas.append('file', this.file);
    }
  }

二、API

FormData提供的方法

  • FormData.append()
    FormData 中添加新的属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
  • FormData.set()
    FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值
  • FormData.get()
    返回在 FormData 对象中与给定键关联的第一个值
  • FormData.getAll()
    返回一个包含 FormData 对象中与给定键关联的所有值的数组。
  • FormData.delete()
    从FormData对象里面删除一个键值对
  • FormData.has()
    返回一个布尔值表明 FormData 对象是否包含某些键
  • FormData.keys()
    返回一个包含所有键的iterator对象
  • FormData.values()
    返回一个包含所有值的iterator对象。
  • FormData.entries()
    返回一个包含所有键值对的iterator对象

1、通过get(key)与getAll(key)来获取相对应的值

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

2、通过append(key,value)在数据末尾追加数据

//通过FormData构造函数创建一个空对象
const formdata=new FormData();
//通过append()方法在末尾追加key为name值为lisi的数据
formdata.append("name","lisi");
//通过append()方法在末尾追加key为name值为zhangsan的数据
formdata.append("name","zhangsan");
//通过append()方法在末尾追加key为name值为wangwu的数据
formdata.append("name","wangwu");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//lisi
//通过getAll方法读取key为name的所有值
console.log(formdata.getAll("name"));//["lisi", "zhangsan", "wangwu"]

3、通过set(key, value)来设置修改数据
key的值不存在,会添加一条数据

//如果key的值不存在,会添加key
formdata.set("name","lisi");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//lisi

key的值存在,会修改对应的value值

4、通过has(key)来判断是否存在对应的key值

//判断是否包含key为name的数据
console.log(formdata.has("name"));//true
//判断是否包含key为age的数据
console.log(formdata.has("age"));//false

5、通过delete(key)可以删除数据

//删除key为name的值
formdata.delete("name");
console.log(formdata.get("name"));//null
在线咨询 拨打电话

电话

010-67916526

微信二维码

微信二维码