JavaScript Academy · 课时

FormData 对象

Q: 「FormData 对象」这节课中我会学到什么？

从表单构建 multipart 数据。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

从表单构建 multipart 数据。

FormData 对象 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是 FormData

FormData 是一种浏览器接口，用于构建表示表单字段及其值的键值对集合。它是打包数据（包括文件）并发送到服务器的标准方式。

它会编码为 multipart/form-data，支持二进制上传。

创建空的 FormData

构造一个空的 FormData，然后使用 append 逐个添加字段。

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

从表单元素构建

将一个 <form> 元素传递给构造函数，所有带有名称的输入项都会自动被捕获。这是最常见的用法。

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append 与 set

append 即使键已经存在，也会添加一个值，因此同一个键可以对应多个值。set 则会替换该键的所有现有值。

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

读取值

get 返回某个键的第一个值，getAll 将所有值作为数组返回，而 has 用于检查该键是否存在。

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

删除字段

delete 会删除某个键对应的所有值。在发送数据前移除字段时非常有用。

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

遍历条目

FormData 支持迭代。您可以使用 entries、keys 或 values，也可以使用 for...of 循环来遍历所有键值对。

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

添加文件

append 可以接受 File 或 Blob 作为值。可选的第三个参数用于设置发送到服务器的文件名。

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

为什么使用 multipart/form-data

FormData 会序列化为 multipart/form-data，能够在一个请求体中同时携带文本字段和二进制文件内容。因此，它是文件上传的首选格式。

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

console.log(data.has('photo'));

转换为对象

对于只包含文本的简单表单，Object.fromEntries 可以将 FormData 转换为普通对象。请注意，对于重复的键，它只会保留一个值。

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

FormData 为什么重要

FormData 是 HTML 表单与网络请求之间的桥梁。它可以收集字段和文件、支持重复的键，并安全地编码二进制数据。接下来，您将使用 FileReader 读取文件内容，然后使用 fetch 发送 FormData。

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

快速检查

FormData 中的 append 和 set 有什么区别？

回顾：FormData 对象

您已经学会了如何打包表单数据：

new FormData(form) 会自动捕获带名称的输入项。
append 允许重复的键；set 会替换它们。
使用 get、getAll 和 has 读取值；使用 entries 进行遍历。
数据会编码为 multipart/form-data，支持文件和二进制数据。

常见问题解答

「FormData 对象」课时是免费的吗？

是的 — 「FormData 对象」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「FormData 对象」这节课中我会学到什么？

从表单构建 multipart 数据。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「FormData 对象」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy