要利用 XMLHttpRequest 的 upload.onprogress 监听文件上传的进度百分比，可以按照以下步骤实现：✅ 基本思路XMLHttpRequest 对象提供了 upload 属性，它是一个 XMLHttpRequestUpload 对象，其中包含 onprogress 事件处理函数。当使用 send() 方法上传文件时，onprogress 事件会持续触发，可以通过 event

本文深入解析了如何正确使用 XMLHttpRequest 的 `upload.onprogress` 事件实现文件上传进度实时监控，强调必须在 `xhr.open()` 之后、`xhr.send()` 之前绑定 `xhr.upload.onprogress`（而非错误的 `xhr.onprogress`），并详细说明了触发失败的常见原因——如后端未返回 `Content-Length`、CORS 配置缺失、本地 file:// 协议限制、代理层缓冲等；同时提供了健壮的防错示例代码，涵盖 `e.lengthComputable` 判断、`e.total` 安全计算、UI 更新时机及与 Fetch API 的关键对比，帮助开发者避开绝大多数“进度不触发”“显示 NaN%”“看似正常却无响应”的实战陷阱。

XMLHttpRequest.upload.onprogress 为什么没触发

绝大多数情况是没给 XMLHttpRequest 实例绑定 upload.onprogress，或者绑得太晚——必须在调用 send() 之前绑定，且不能在 open() 之前。另外，onprogress 只对上传过程有效，对下载（onload 等）无效，别误配到 xhr.onprogress（这个不存在）。

常见错误写法：xhr.onprogress = handler —— 这是错的，正确路径是 xhr.upload.onprogress。

• 必须使用 xhr.upload.onprogress，不是 xhr.onprogress
• 绑定时机：在 xhr.open() 之后、xhr.send() 之前
• 仅适用于非同源请求时开启 CORS；若后端未返回 Access-Control-Allow-Origin，控制台会静默失败（无报错但不触发）
• 本地文件（file:// 协议）下部分浏览器禁用 upload.onprogress，建议用本地服务器测试（如 python3 -m http.server）

怎么算出准确的上传百分比

进度事件对象（ProgressEvent）提供 loaded 和 total 两个只读属性。loaded 是已上传字节数，total 是文件总大小（注意：仅当后端支持 Content-Length 且未分块传输时才可靠）。所以百分比就是 Math.round((e.loaded / e.total) * 100)。

但要注意：某些服务端框架（如 Express 默认、Nginx 默认配置）可能不透传原始 Content-Length，或使用流式解析导致 e.total === 0。此时 e.total 为 0，除零会得 NaN。

• 务必检查 e.total > 0 再计算，否则显示 NaN%
• 如果 e.total === 0，说明服务端未声明长度，只能显示“上传中…”或用其他方式估算（如分片上传自维护计数）
• e.lengthComputable 是更规范的判断依据：只有为 true 时 e.total 才可信

完整可运行示例（含防错逻辑）

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
<p>const xhr = new XMLHttpRequest();</p><p>xhr.upload.onprogress = (e) => {
if (!e.lengthComputable) return;
const percent = Math.round((e.loaded / e.total) * 100);
console.log(<code>上传中：${percent}%</code>);
};</p><p>xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
console.log('上传完成');
}
};</p><p>xhr.onerror = () => console.error('上传失败');</p><p>xhr.open('POST', '/upload');
xhr.send(file);
});
</p>

这段代码能跑通的前提是后端接收 multipart/form-data 或原始二进制流，并且响应头包含 Access-Control-Allow-Origin: *（开发环境）或对应域名。

和 Fetch API 的 upload 进度对比有什么坑

Fetch 本身不支持上传进度监听——它没有 upload 属性。想用 Fetch 实现进度，必须手动分片读取 Blob + ReadableStream + AbortController，复杂度陡增。而 XMLHttpRequest 是目前唯一原生支持简单上传进度监听的标准方案。

如果你正在用现代框架（如 React/Vue），注意不要在组件卸载后还试图更新 state（比如 setState({ progress })），否则会触发警告甚至报错。建议加一个闭包标记或用 AbortSignal 配合清理。

真正容易被忽略的是：即使所有 JS 逻辑都对，如果后端用了代理（如 Nginx）、WAF 或 Serverless 函数，它们可能缓冲整个请求体再转发，导致客户端看到的 loaded 增长“卡顿”或直接跳到 100%。这时得查中间层配置，而不是改前端。

好了，本文到此结束，带大家了解了《要利用 XMLHttpRequest 的 upload.onprogress 监听文件上传的进度百分比，可以按照以下步骤实现：✅ 基本思路XMLHttpRequest 对象提供了 upload 属性，它是一个 XMLHttpRequestUpload 对象，其中包含 onprogress 事件处理函数。当使用 send() 方法上传文件时，onprogress 事件会持续触发，可以通过 event.loaded 和 event.total 计算出上传进度百分比。📌 示例代码const xhr = new XMLHttpRequest(); // 设置上传地址 xhr.open('POST', 'https://example.com/upload', true); // 设置上传进度监听 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; console.log(`上传进度: ${percentComplete.toFixed(2)}%`); // 可以在这里更新页面上的进度条或其他 UI } }; // 设置请求头（如果需要） xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 创建 FormData 对象并添加文件 const formData = new FormData(); formData.append('file', fileInput.files[0]); // fileInput 是一个 <input type="file"> 元素 // 发送请求 xhr.send(formData);🧠 关键》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！