javascript原生ajax文件上传需用xmlhttprequest的upload.onprogress监听上传进度，配合formdata自动设置multipart/form-data；须绑定xhr.upload而非xhr本身，检查e.lengthcomputable再计算百分比，并用onload/onerror处理结果。
JavaScript 中用原生 Ajax 实现文件异步上传并监控进度，核心是使用 XMLHttpRequest 的 upload.onprogress 事件配合 FormData。关键在于监听上传过程而非下载过程，且需服务端配合返回正确响应。
准备 FormData 并设置请求
先创建 FormData 实例，把文件（如 <input type="file"> 的 files[0]）追加进去。注意不要手动设置 Content-Type，让浏览器自动设置带 boundary 的 multipart/form-data：
- 获取文件元素：
const fileInput = document.querySelector('#file'); - 构造表单数据：
const formData = new FormData(); formData.append('file', fileInput.files[0]); - 创建请求：
const xhr = new XMLHttpRequest(); - 打开连接：
xhr.open('POST', '/upload', true);
监听上传进度事件
进度监控必须绑定在 xhr.upload 对象上，不是 xhr 本身。只有上传阶段（即向服务器发数据）才触发 onprogress，它会提供已上传字节数和总字节数：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 监听进度：
xhr.upload.onprogress = function(e) { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; console.log(`上传中：${percent.toFixed(1)}%`); } }; -
e.lengthComputable为true才能安全计算百分比，否则可能因服务端未返回Content-Length或使用分块编码而不可算 - 避免频繁更新 UI，可加节流（例如每 1% 更新一次）
处理上传完成与错误
上传结束后，通过 onload 和 onerror 捕获结果。注意 onload 表示请求完成（无论成功失败），需检查 xhr.status：
- 成功响应：
xhr.onload = function() { if (xhr.status >= 200 && xhr.status - 网络错误：
xhr.onerror = function() { console.error('网络异常，上传中断'); }; - 超时控制：
xhr.timeout = 60000; xhr.ontimeout = function() { console.error('上传超时'); };
服务端注意事项
前端进度监控依赖服务端行为。虽然不强制要求，但以下几点能提升兼容性和体验：
- 确保服务端正确接收 multipart 数据（如 Node.js 的
busboy、Python 的Flask.request.files） - 响应状态码应规范：成功返回
200或201，失败返回对应错误码（如400文件过大、500内部错误） - 避免在上传中途关闭连接或主动断连，否则会触发
onerror
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
