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 事件行为差异，得靠实际设备+真机调试才能踩准节奏。
