推荐使用 XMLHttpRequest 实现文件上传进度监控，通过 xhr.upload.onprogress 事件获取 loaded 和 total 计算百分比；Fetch 需 ReadableStream 手动处理且兼容性差；注意 CORS、分片上传、并发控制及移动端兼容性。
JavaScript 实现文件上传并监控进度，核心是使用 XMLHttpRequest（或 Fetch API 配合 ReadableStream）配合 progress 事件。现代浏览器中推荐用 XMLHttpRequest.upload.onprogress 获取上传进度，它能实时反馈已上传字节数。
使用 XMLHttpRequest 监控上传进度
这是最稳定、兼容性好且原生支持进度监听的方式：
- 创建
XMLHttpRequest实例，调用open('POST', url) - 监听
xhr.upload.onprogress事件，该事件对象含loaded（已传字节数）和total（总字节数） - 计算进度百分比：
Math.round((e.loaded / e.total) * 100) - 注意：只有在发送
FormData（含文件）时，total才有值；纯文本请求可能不触发 progress
用 Fetch + Upload Progress（需手动流式处理）
Fetch 本身不直接暴露上传进度，但可通过 ReadableStream + pipeTo 拦截上传数据流（仅 Chromium 120+ 和 Firefox 125+ 支持）：
- 将文件转为
ArrayBuffer或使用file.stream() - 创建自定义
TransformStream，在transform()中累加已读字节并派发自定义进度事件 - 将处理后的流传入
fetch(url, { method: 'POST', body: processedStream }) - 实际项目中更推荐回退到 XMLHttpRequest，除非明确需要 Fetch 的其他特性（如 AbortSignal 统一控制）
关键细节与常见问题
避免踩坑，要注意以下几点：
立即学习“Java免费学习笔记（深入）”；
-
CORS 配置：服务端必须返回
Access-Control-Allow-Origin，且若带 Cookie 还需设置credentials: 'include' - 大文件分片上传：单次上传受网络/超时限制，真实场景建议结合 MD5 校验、断点续传、分块并发（如每块 2MB）
- 多文件并发控制：避免同时上传过多文件拖垮浏览器，可用 PromisePool 限流（如最多 3 个并发）
-
移动端兼容性：iOS Safari 对
upload.onprogress支持良好，但部分旧版本可能只在完成时触发一次，建议降级显示“上传中…”状态
一个最小可用示例（XMLHttpRequest）
HTML 中放一个 <input type="file"> 和进度条 <progress value="0" max="100"></progress>：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
const xhr = new XMLHttpRequest();
<p>xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
document.querySelector('progress').value = percent;
}
};</p><p>xhr.onload = () => {
if (xhr.status === 200) console.log('上传成功');
};</p><p>xhr.open('POST', '/upload');
xhr.send(new FormData());
});
不复杂但容易忽略的是：确保后端正确接收 multipart/form-data，并返回合适的状态码与响应头。前端进度只是“发出多少”，不代表服务端已写入磁盘——最终结果仍需靠 onload 或 onerror 确认。
