HTML5FormData上传进度显示_HTML5XMLHttpRequest上传监听百分比方法【指南】

XMLhttpRequest.upload.onprogress 不触发？检查是否漏了 open() 之后、send() 之前绑定

常见错误是把 onprogress 放在 open() 前，或绑在 onload 之后——这时监听器根本没注册上。XMLHttpRequest 的上传事件只在 send() 调用后才可能触发，且必须在 send() 前完成绑定。

• upload 对象仅对非 GET 请求有效（POST/PUT 等），GET 请求无上传体，onprogress 永远不触发
• 如果用 FormData 提交但服务端返回 400/500，onprogress 可能只触发 1–2 次就中断，不是 bug，是浏览器提前终止上传
• 本地 file:// 协议下部分浏览器禁用 upload 事件，务必在 http(s) 服务器环境测试

FormData.append() 传 Blob 还是 File？影响进度精度

传 File 对象（比如 input.files[0]）时，onprogress.loaded 和 .total 是准确的字节数；传普通 Blob（如 new Blob([str])）也行，但若 Blob 由 canvas.toBlob() 或 fetch().then(r => r.blob()) 生成，某些旧版 chrome 会把 .total 报成 0，导致百分比算成 NaN%。

• 优先用原始 File 对象，避免中间转 Blob
• 若必须用 Blob，创建时显式传入 type： new Blob([data], {type: 'image/jpeg'})，否则部分浏览器无法正确计算 size
• 不要用 json.stringify() 后 append 进 FormData——那会变成文本上传，体积小、进度跳变快，掩盖真实大文件行为

为什么 onprogress 里 console.log(this.upload.loaded) 总是 0？

因为 this 在事件回调里不指向 XHR 实例，而是全局对象（或 undefined）。直接写 xhr.upload.onprogress = function() { console.log(this.upload) } 必然报错或取不到值。

• 用箭头函数保持词法作用域：xhr.upload.onprogress = (e) => { console.log(e.loaded, e.total) }
• 或明确绑定：xhr.upload.onprogress = function(e) { console.log(this.upload.loaded) }.bind(xhr)
• e.loaded 是已上传字节数，e.total 是预估总大小（等于 File.size），二者都是数字，可直接做除法

移动端 safari 进度不准？别信 loaded/total，改用时间戳估算

ios 15–16 的 Safari 对大文件上传的 onprogress 触发频率极低（有时整次上传只触发 2–3 次），且 e.total 偶尔为 0。硬靠它算百分比会卡在 0% 或突然跳到 100%。

立即学习“前端免费学习笔记（深入）”；

• 加个计时器兜底：let start = date.now(); xhr.upload.onprogress = () => { const elapsed = Date.now() - start; /* 结合已知文件大小和平均速率估算 */ }
• 对 >10MB 文件，建议分片上传（如每片 2MB），每片单独监听进度，规避单次 upload 事件不可靠问题
• 不要依赖 onprogress 更新 ui 频率，用 requestAnimationFrame 节流显示，避免频繁重绘卡顿

真正难的不是监听事件，是面对不同内核对同一规范的实现偏差——尤其是 iOS webkit 和 android webview 的 upload 事件行为差异，得靠实际设备+真机调试才能踩准节奏。