DaMeng

FormData

发表于 更新于 分类于 ，

作用

可以用来构造表单数据，然后作为 data 发送给服务器。

语法

构造函数

1
var formData = new FormData(form)

  • 参数

    • form（可选）

      当指定 form 时，会使用 form 中的表单值（包括 form 中的文件内容）初始化 formData。

1
2
3
//所有的 form 元素都需要有 name 属性，否则无法访问到值。
var myForm = document.getElementById('myForm');
formData = new FormData(myForm);
1
2
var formData = new FormData(); // 当前为空
formData.append('username', 'Chris');

方法

append

1
2
FormData.append(name, value);
FormData.append(name, value, filename);
  • 参数
    • name：表单元素的 name 属性值
    • value：表单元素的 value 属性值，可以是 字符串 或 Blob 类型
    • filename（可选）：传递给服务器的文件名称。
      • 当第二个参数为 Blob 类型时，filename 默认值为 blob
      • 当第二个参数为 File 对象时，filename 默认值为该文件名称
  • 返回值
    • 空
  • 功能
    • 添加新值到 FormData 对象集合的后面，即使新值 key 已存在。
1
2
formData.append('username', 'Chris');
formData.append('userpic', myFileInput.files[0], 'chris.jpg');

delete

1
FormData.delete(name);
  • 参数
    • name：要删除的键（Key）。
  • 返回值
    • 空
  • 功能
    • 从 FormData 中删除指定键和对应的值
1
formData.delete('username');

entries

1
FormData.entries();
  • 返回值
  • 功能
    • 返回一个 iterator 对象 ，此对象可以遍历访问 FormData中 的键值对
1
2
3
for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

get

1
FormData.get(name);
  • 参数
    • name：将要获取值的键名。

  • 返回值

  • 功能
    • 返回 FormData 对象中和指定的键关联的第一个值。
1
2
3
4
formData.append('username', 'Chris');
formData.append('username', 'Bob');

formData.get('username'); // Returns "Chris"

getAll

1
FormData.getAll(name);
  • 参数
    • 要获取值的 key
  • 返回值
    • 包含由 key 所对应值组成的数组
  • 功能
    • 返回该 FormData 对象指定 key 的所有值
1
2
3
4
formData.append('username', 'Chris');
formData.append('username', 'Bob');

formData.getAll('username'); // Returns ["Chris", "Bob"]

has

1
FormData.has(name);
  • 参数
    • name：要查询的 key
  • 返回值
    • 查询结果
  • 功能
    • 查询 FormData 对象是否存在某个key
1
formData.has('username'); // Returns false

keys

1
FormData.keys();
  • 返回值
    • formData 包含的所有 key 的迭代器
  • 功能
    • 返回一个迭代器（iterator），用来遍历了该 formData 包含的所有key
1
2
3
4
5
6
7
8
9
10
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 输出所有的 key
for (var key of formData.keys()) {
   console.log(key); 
}
//输出：
//key1
//key2

set

1
2
FormData.set(name, value);
FormData.set(name, value, filename);

  • 参数

    • 同 FormData.append

  • 功能

    • 对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。
1
2
formData.set('username', 'Chris');
formData.set('userpic', myFileInput.files[0], 'chris.jpg');

value

1
FormData.values();
  • 功能
    • 返回一个允许遍历该对象中所有值的迭代器
1
2
3
4
5
6
7
8
9
10
11
formData.append('key1', 'value1');
formData.append('key2', 'value2');

//显示值
for (var value of formData.values()) {
   console.log(value); 
}
//输出：
//value1
//value2