极客笔记js formdata对象
FormData是一个用于创建HTML表单数据的JavaScript对象，它可以用来将表单数据序列化成键值对，然后通过AJAX请求发送给服务器。它提供了一种简单的方式来处理表单数据，无论是文本、文件还是通过HTML表单控件获取到的其他类型的数据。
在以前，我们通常会使用传统的表单序列化方法来处理表单数据，例如使用jQuery的serialize方法。但是这种方法的一个限制是只能处理表单输入控件的值，而无法处理文件上传的数据。而FormData对象给予了我们更大的灵活性，允许我们直接发送文件和其他类型的数据。
FormData对象的创建
我们可以使用FormData构造函数创建一个FormData对象，不带任何参数或者传入一个代表表单元素的DOM对象。
例如，我们可以通过以下方式创建一个新的FormData对象：
var formData = new FormData();
或者，我们可以将表单元素传递给FormData构造函数来创建FormData对象：
var form = document.getElementById('myForm');
var formData = new FormData(form);
这将会将表单元素中的所有输入控件的数据添加到FormData对象中。
FormData对象的方法
append(name, value)
append方法用于将键值对添加到FormData对象中。name参数代表表单字段的名称，value参数代表该字段的值。
例如：
formData.append('username', 'alice');
formData.append('password', '123456');
delete(name)
delete方法用于从FormData对象中删除指定字段。name参数代表要删除的字段名称。
例如：
formData.delete('password');
get(name)
get方法用于获取指定字段的第一个值。name参数代表要获取值的字段名称。
例如：
formData.get('username'); // 返回 'alice'
getAll(name)
getAll方法用于获取指定字段的所有值的数组。name参数代表要获取值的字段名称。
例如：
formData.getAll('username'); // 返回 ['alice']
has(name)
has方法用于判断FormData对象是否包含指定名称的字段。如果存在指定字段则返回true，否则返回false。
例如：
formData.has('password'); // 返回 false
set(name, value)
set方法用于设置指定字段的值。如果指定的字段不存在，则会添加该字段。
例如：
formData.set('password', '654321');
keys()
keys方法用于返回一个包含FormData对象中所有字段名称的迭代器。
例如：
for (var key of formData.keys()) {
console.log(key);
}
values()
values方法用于返回一个包含FormData对象中所有字段值的迭代器。
例如：
for (var value of formData.values()) {
console.log(value);
}
entries()
entries方法用于返回一个包含FormData对象中所有字段名称和值的迭代器。
例如：
for (var pair of formData.entries()) {
console.log(pair[0] + ': ' + pair[1]);
}
通过FormData上传文件
我们可以简单地通过给FormData对象添加一个文件字段来实现文件上传。可以通过append方法将文件字段添加到FormData对象中。
例如，以下代码将创建一个包含文件字段的FormData对象：
var formData = new FormData();
formData.append('myfile', fileInput.files[0]);
这里，fileInput是一个input标签，用户可以通过该标签选择文件。
要注意的是，我们需要确保在HTML表单中设置了正确的enctype属性。例如：
<form enctype="multipart/form-data" id="myForm">
<input type="file" name="myfile" id="fileInput">
</form>
然后，我们可以使用AJAX将FormData对象发送给服务器，以实现文件上传：
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);
这里，我们使用XMLHttpRequest对象发送POST请求，并将FormData对象作为请求的主体发送给服务器。
FormData对象的兼容性
FormData对象自从JavaScript的XMLHttpRequest Level 2规范被引入以来，已经成为了现代浏览器的一项标准特性。因此，在大多数主流浏览器中都支持FormData对象。
然而，旧版本的IE浏览器（IE9及以下）并不支持FormData对象。如果你需要在这些浏览器中使用FormData对象，可以考虑引入一些相关的Polyfill库来提供兼容性。
结论
总结一下，FormData对象是一个用于处理HTML表单数据的JavaScript对象。它提供了一种简单的方式来处理表单数据，包括文本、文件和其他类型的数据。我们可以使用它来创建、添加、删除和获取表单字段，以及实现文件上传功能。虽然旧版本的IE浏览器不支持FormData对象，但在大多数现代浏览器中都可以使用。