HTML5通过File API和FormData实现文件上传，首先利用input选择文件，再用FileReader读取并预览图片，接着将文件添加到FormData对象中，最后通过XMLHttpRequest发送请求，支持进度监控与多字段提交，实现高效前端文件操作。
HTML5 提供了强大的文件操作能力，通过 File API 和 FormData，我们可以轻松实现前端文件选择、预览以及上传功能。这种方式无需依赖 Flash 或其他插件，兼容现代浏览器，是目前主流的文件上传方案。
使用 File API 获取本地文件
File API 允许网页访问用户本地文件，主要通过 input[type=file] 和 JavaScript 的 FileReader 对象来实现。
示例：获取用户选择的文件
你可以通过 FileReader 实现图片预览：
立即学习“前端免费学习笔记（深入）”；
const reader = new FileReader();
reader.onload = function(e) {
const preview = document.createElement('img');
preview.src = e.target.result;
document.body.appendChild(preview);
};
reader.readAsDataURL(file);使用 FormData 构建上传数据
FormData 是 HTML5 提供的一个对象，用于模拟表单数据，特别适合异步上传文件。
它可以自动处理 MIME 类型，并支持多文件上传。
示例：将文件添加到 FormData 并上传
const formData = new FormData();
formData.append('avatar', file); // 'avatar' 是后端接收字段名
formData.append('username', 'john'); // 可同时上传其他字段通过 XMLHttpRequest 发送文件
使用 XMLHttpRequest（XHR）发送 FormData 数据是最常见的做法。
示例：上传文件到服务器
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
// 监听上传进度（可选）
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log('上传进度:', Math.round(percent) + '%');
}
};
// 上传完成
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功:', xhr.responseText);
} else {
console.error('上传失败:', xhr.statusText);
}
};
// 发送请求
xhr.send(formData);
完整示例：带进度条的文件上传
结合以上技术，实现一个简单的带进度提示的上传功能：
进度：0%
基本上就这些。利用 HTML5 的 File API 和 FormData，你可以实现高效、灵活的文件上传功能，支持进度监控、多文件、图片预览等常见需求，且代码简洁易维护。
