JavaScript中可用XMLHttpRequest的upload.onprogress事件监听文件上传进度，需配合FormData构造请求体，现代浏览器原生支持；先获取文件并添加到FormData，再配置XHR并绑定onprogress回调计算百分比，最后注意CORS、不可用fetch、可取消上传及多文件处理。
JavaScript 中使用 Ajax 实现文件上传进度监听，核心是利用 XMLHttpRequest 的 upload.onprogress 事件，配合 FormData 构造请求体。现代浏览器均支持，无需第三方库。
1. 创建 FormData 并添加文件
先获取用户选择的文件（如通过 <input type="file">），再将其追加到 FormData 对象中：
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) return;
<p>const formData = new FormData();
formData.append('file', file); // 键名需与后端约定一致
2. 配置 XMLHttpRequest 并监听上传进度
创建 XMLHttpRequest 实例，设置请求方法和 URL；关键是在发送前为 xhr.upload 绑定 onprogress 回调：
const xhr = new XMLHttpRequest();
<p>// 监听上传进度
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(<code>上传中：${percent}%</code>);
// 可更新进度条 DOM，例如：progressBar.style.width = percent + '%';
}
};</p><p>xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
console.log('上传成功', xhr.responseText);
} else {
console.error('上传失败', xhr.statusText);
}
};</p><p>xhr.onerror = function () {
console.error('网络错误');
};</p><p>xhr.open('POST', '/api/upload');
xhr.send(formData);
3. 注意事项与常见问题
确保后端能正确接收 multipart/form-data 格式，并返回合理响应。前端还需注意：
立即学习“Java免费学习笔记（深入）”；
-
不能使用
fetch原生监听上传进度 —— 它不暴露上传过程的底层事件，需回退到XMLHttpRequest； -
服务端必须设置 CORS 头（如
Access-Control-Allow-Origin），否则跨域上传会失败； -
大文件建议添加取消功能：保存
xhr引用，调用xhr.abort()即可中断； -
多个文件上传时，可为每个文件单独创建
FormData和XMLHttpRequest，或统一打包后按总大小计算整体进度。
4. 简单进度条示例（HTML + JS）
配合一个 <div class="progress-bar"><div class="progress"></div></div> 结构：
const progressBar = document.querySelector('.progress');
xhr.upload.onprogress = e => {
if (e.lengthComputable) {
const width = (e.loaded / e.total) * 100;
progressBar.style.width = width + '%';
}
};
