当前位置：首页 > wzjs >正文

河南省住房建设厅网站首页王者荣耀wordpress

wzjs 2025/9/19 7:53:52

河南省住房建设厅网站首页,王者荣耀wordpress,外贸营销员,淘宝官网首页免费注册前端 FormData 详解 FormData 是前端用于构造表单数据的对象，常用于通过 XMLHttpRequest 或 fetch 发送表单数据，尤其是文件上传。它支持键值对形式的数据，并且可以包含文件数据。 1. 创建 FormData 对象可以通过构造函数创建一个空的 For…

前端 FormData 详解

FormData 是前端用于构造表单数据的对象，常用于通过 XMLHttpRequest 或 fetch 发送表单数据，尤其是文件上传。它支持键值对形式的数据，并且可以包含文件数据。

1. 创建 FormData 对象

可以通过构造函数创建一个空的 FormData 对象，也可以基于现有的表单元素初始化。

// 创建一个空的 FormData 对象
const formData = new FormData();// 基于表单元素初始化
const formElement = document.querySelector("form");
const formData = new FormData(formElement);

2. FormData 的方法

FormData 提供了多种方法用于操作表单数据：

append(name, value): 添加一个新的键值对。
- name: 字段名称。
- value: 字段值，可以是字符串、Blob 或 File 对象。
- 如果字段已存在，会追加一个新值，而不是覆盖。
```
formData.append("username", "John");
formData.append("avatar", fileInput.files[0]); // 添加文件
```
set(name, value): 设置一个键值对。
- 如果字段已存在，会覆盖旧值。
```
formData.set("username", "Jane"); // 覆盖之前的 'John'
```
get(name): 获取指定字段的第一个值。
- 如果字段不存在，返回 null。
```
const username = formData.get("username"); // 'Jane'
```

getAll(name): 获取指定字段的所有值，返回一个数组。

如果字段不存在，返回空数组。

formData.append("hobby", "reading");
formData.append("hobby", "swimming");
const hobbies = formData.getAll("hobby"); // ['reading', 'swimming']

has(name): 判断是否存在指定字段。

const hasUsername = formData.has("username"); // true

delete(name): 删除指定字段。
```
formData.delete("username");
```

entries(): 返回一个迭代器，包含所有键值对。

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

keys(): 返回一个迭代器，包含所有键。

for (const key of formData.keys()) {console.log(key);
}

values(): 返回一个迭代器，包含所有值。

for (const value of formData.values()) {console.log(value);
}

3. 使用 FormData 上传文件

FormData 最常见的用途是上传文件。可以通过 append 方法将文件添加到 FormData 中，然后通过 fetch 或 XMLHttpRequest 发送。

示例：

<input type="file" id="fileInput" />
<button id="uploadBtn">Upload</button><script>document.getElementById("uploadBtn").addEventListener("click", () => {const fileInput = document.getElementById("fileInput");const file = fileInput.files[0];const formData = new FormData();formData.append("file", file);fetch("/upload", {method: "POST",body: formData,}).then((response) => response.json()).then((data) => console.log(data)).catch((error) => console.error("Error:", error));});
</script>

4. 使用 FormData 发送普通表单数据

除了文件，FormData 也可以用于发送普通的表单数据。

示例：

<form id="myForm"><input type="text" name="username" value="John" /><input type="email" name="email" value="john@example.com" />
</form><script>const formElement = document.getElementById("myForm");const formData = new FormData(formElement);fetch("/submit", {method: "POST",body: formData,}).then((response) => response.json()).then((data) => console.log(data)).catch((error) => console.error("Error:", error));
</script>

5. FormData 与 JSON 的区别

FormData:
- 适合发送文件或二进制数据。
- 数据以 multipart/form-data 格式发送。
- 不需要手动设置请求头。
JSON:
- 适合发送结构化数据。
- 数据以 application/json 格式发送。
- 需要手动设置请求头 Content-Type: application/json。

6. 注意事项

文件上传:
- 使用 FormData 上传文件时，浏览器会自动设置 Content-Type 为 multipart/form-data。
- 不需要手动设置请求头。
字段重复:
- 使用 append 方法可以添加多个相同字段名的值。
- 使用 set 方法会覆盖已存在的字段值。
兼容性:
- FormData 在现代浏览器中支持良好，但在一些旧版浏览器中可能不支持。