0


new FormData()

一、新建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:

<input id="planFile" type="file" class="form-control" ng2FileSelect [uploader]="planImport"
            (change)="planChange($event)"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

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

本文转载自: https://blog.csdn.net/weixin_48713522/article/details/128953016
版权归原作者 小修勾在学习嘛 所有, 如有侵权,请联系我们删除。

“new FormData()”的评论:

还没有评论