javascript 文件上传进度监听最通用方案是 xmlhttprequest，通过 xhr.upload.onprogress 获取 loaded/total 计算百分比，配合 formdata 发送文件，并需处理 total 为 0、跨域响应头等边界情况。
JavaScript 中 Ajax 实现文件上传进度监听，核心是使用 XMLHttpRequest 的 upload 属性监听 progress 事件，配合 FormData 发送二进制数据。现代项目更推荐用 Fetch API + Upload Stream（如 ReadableStream），但浏览器支持有限；目前最通用、兼容性最好的方案仍是 XMLHttpRequest。
使用 XMLHttpRequest 监听上传进度
XMLHttpRequest 提供了 upload.onprogress 回调，能实时获取已上传字节数和总大小，从而计算百分比。
- 创建
XMLHttpRequest实例，不要用简写的fetch（原生 fetch 不暴露上传进度） - 监听
xhr.upload.onprogress，注意该事件只在上传阶段触发（不是xhr.onprogress） - 从事件对象的
loaded和total属性读取进度数据，total可能为 0（如服务器未返回 Content-Length） - 确保服务端正确设置响应头（如
Access-Control-Allow-Headers: Content-Type），否则跨域时可能失败
构造 FormData 并发送文件
把文件塞进 FormData，再作为请求体发送。FormData 自动设置合适的 Content-Type（multipart/form-data），无需手动设置。
- 获取
<input type="file">的files[0]，或拖拽获得的DataTransferItem - 新建
FormData，用append('file', file)添加文件；可追加其他字段如append('name', 'xxx') - 调用
xhr.open('POST', '/upload')，然后xhr.send(formData)
处理进度回调与边界情况
进度事件不是每字节都触发，而是浏览器按内部策略节流；需防重复更新 UI 或除零错误。
- 检查
event.total > 0再计算百分比，避免NaN - 可用
Math.round((e.loaded / e.total) * 100)得到整数百分比 - 上传完成时会触发
xhr.onload，失败时触发xhr.onerror或xhr.ontimeout - 若需取消上传，调用
xhr.abort()，它会触发xhr.onabort
简单示例代码
以下是最小可行代码，可直接运行验证：
const input = document.querySelector('input[type="file"]');
const xhr = new XMLHttpRequest();
<p>input.addEventListener('change', () => {
const file = input.files[0];
if (!file) return;</p><p>xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(<code>上传中：${percent}%</code>);
// 更新进度条：progressBar.style.width = percent + '%';
}
};</p><p>xhr.onload = () => {
if (xhr.status === 200) {
console.log('上传成功', xhr.responseText);
}
};</p><p>xhr.onerror = () => console.error('上传失败');</p><p>const formData = new FormData();
formData.append('file', file);</p><p>xhr.open('POST', '/api/upload');
xhr.send(formData);
});
</p>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
