HTML5的FormData怎么用？如何上传文件？
在Web开发中，表单提交和文件上传是非常常见的需求。在HTML5之前，如果我们想要通过AJAX异步上传文件，通常需要借助Flash或者使用一些较为繁琐的技巧（如隐藏iframe）。而HTML5引入的FormData对象，极大地简化了这一过程，使得我们可以轻松地通过AJAX提交表单数据以及上传文件。
一、什么是 FormData？
FormData 是HTML5新增的一个接口，它提供了一种表示表单数据的键值对的构造方式。它的主要特点是：
无需设置请求头：使用
FormData提交数据时，浏览器会自动设置Content-Type: multipart/form-data以及必需的边界（Boundary），无需手动拼接。支持二进制数据：不仅可以附加字符串，还可以直接附加Blob、File等二进制数据，这是实现文件上传的核心。
与表单元素无缝结合：可以直接传入表单DOM元素，自动收集表单内的所有数据。
二、FormData 的基础用法
创建一个FormData对象非常简单，主要有两种方式：
1. 手动创建并添加数据
你可以通过append()方法逐个添加键值对：
var formData = new FormData();
formData.append('username', '张三');
formData.append('age', 25);
// append的第三个参数是文件名，如果是文件的话可以指定
formData.append('avatar', myFileInput.files[0], 'zhangsan.jpg');2. 通过表单元素初始化
如果你想提交整个表单的数据，可以直接将表单DOM元素传入FormData构造函数：
<form id="myForm"> <input type="text" name="username" value="李四" /> <input type="file" name="avatar" /> </form>
var formElement = document.getElementById('myForm');
var formData = new FormData(formElement);
// 此时表单内的username和avatar都会被自动收集进formData中三、如何使用 FormData 上传文件？
文件上传的核心在于获取到<input type="file">中的文件对象，并将其附加到FormData中，然后通过AJAX发送。
下面是一个完整的前后端交互示例：
1. HTML 结构
<form id="uploadForm"> <input type="text" name="desc" placeholder="文件描述" /> <input type="file" name="file" id="fileInput" /> <button type="button">上传</button> </form> <div id="progress"></div>
2. JavaScript 逻辑 (基于 XMLHttpRequest)
function uploadFile() {
var fileInput = document.getElementById('fileInput');
// 判断是否选择了文件
if (fileInput.files.length === 0) {
alert('请先选择文件！');
return;
}
var formData = new FormData();
// 添加普通文本字段
formData.append('desc', document.querySelector('input[name=desc]').value);
// 添加文件字段 (files[0]即用户选中的第一个文件)
formData.append('file', fileInput.files[0]);
var xhr = new XMLHttpRequest();
// 监听上传进度（可选）
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total * 100).toFixed(2) + '%';
document.getElementById('progress').innerText = '上传进度：' + percent;
}
});
// 监听上传完成
xhr.addEventListener('load', function() {
if (xhr.status === 200) {
alert('上传成功！服务器返回：' + xhr.responseText);
} else {
alert('上传失败！');
}
});
// 发送请求
xhr.open('POST', 'http://www.ipipp.com/upload', true);
// 注意：使用FormData时，不要手动设置Content-Type头，浏览器会自动处理
xhr.send(formData);
}3. JavaScript 逻辑 (基于 Fetch API)
现代浏览器更推荐使用Fetch API，代码会更加简洁：
function uploadFileWithFetch() {
var fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 0) return;
var formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('http://www.ipipp.com/upload', {
method: 'POST',
body: formData // 直接将FormData作为body传入
})
.then(response => response.json())
.then(data => {
console.log('上传成功', data);
})
.catch(error => {
console.error('上传失败', error);
});
}四、FormData 常用方法及注意事项
常用方法
append(name, value, filename)：向 FormData 中添加新的键值对。如果添加的是文件，可以指定第三个参数作为文件名。
get(name)：获取指定 name 的第一个键值对的值。
getAll(name)：获取指定 name 的所有键值对的值（通常用于多选或多个文件上传）。
has(name)：判断是否存在指定 name 的键值对。
set(name, value, filename)：设置键值对。如果该 name 已存在，则会覆盖之前的值；如果不存在，则等同于 append。
delete(name)：删除指定 name 的键值对。
注意事项
切勿手动设置 Content-Type：使用 AJAX 发送 FormData 时，浏览器会自动加上
Content-Type: multipart/form-data; boundary=----xxx。如果你手动设置了xhr.setRequestHeader('Content-Type', 'multipart/form-data')，会丢失 boundary，导致服务器无法解析数据。jQuery 的设置：如果你使用 jQuery 的
$.ajax发送 FormData，必须设置processData: false（阻止 jQuery 将 FormData 转换为查询字符串）和contentType: false（阻止 jQuery 自动设置 Content-Type）。多文件上传：如果需要上传多个文件，可以在 input 标签上加上
multiple属性，然后遍历fileInput.files，依次append到 FormData 中，且它们的 name 属性可以相同。
总结
HTML5 的 FormData 使得异步文件上传变得前所未有的简单。我们只需要获取到文件对象，将其放入 FormData 中，然后通过 XHR 或 Fetch 发送即可。免去了手动拼接表单边界和读取文件二进制流的繁琐工作，是现代Web开发中处理表单和文件上传的绝对首选方案。