FormData 对象

FormData 对象在 Web 开发中经常被用来表示表单数据（尤其是用于 XMLHttpRequest 或 Fetch API 的发送）。它可以用于通过 JavaScript 构建一个与表单相似的键值对集合，这些键值对可以被发送到服务器。与普通的 URL 编码表单数据不同，FormData 对象允许你使用多种数据类型（如 Blob、File 对象等）进行发送。

以下是 FormData 对象的一些基本用法：

1、创建一个新的 FormData 对象

let formData = new FormData();

2、添加键值对

你可以使用 append() 方法来添加键值对到 FormData 对象中。

	formData.append('username', 'JohnDoe');
	formData.append('password', 'secret123');

注意：append() 方法允许你添加多个具有相同键名的值，它们都会被发送。
3、添加 File 对象

如果你有一个 <input type="file"> 元素并且用户选择了一个文件，你可以将文件添加到 FormData 对象中。

	let fileInput = document.querySelector('input[type=file]');
	let file = fileInput.files[0];
	formData.append('file', file);

4、使用 FormData 发送数据

你可以使用 XMLHttpRequest 或 Fetch API 来发送 FormData 对象。

使用 XMLHttpRequest

	let xhr = new XMLHttpRequest();
	xhr.open('POST', '/your-endpoint', true);
	xhr.send(formData);

使用 Fetch API

	fetch('/your-endpoint', {
	method: 'POST',
	body: formData
	})
	.then(response => response.json())
	.then(data => console.log(data))
	.catch(error => console.error('Error:', error));

5、访问 FormData 中的数据

需要注意的是，一旦数据被添加到 FormData 对象中，你就不能直接通过键名来访问它（与普通的 JavaScript 对象不同）。这是因为 FormData 接口基于的是表单的键值对集合，而不是一个可枚举的 Map 或类似结构。但你可以使用 entries()、keys() 或 values() 方法来迭代数据。

	for (let pair of formData.entries()) {
	console.log(pair[0]+ ', '+ pair[1]);
	}

这就是 FormData 对象的基本用法。它提供了一种方便的方式来收集和发送表单数据，尤其是当需要发送文件或其他非简单键值对时。