JavaScript多文件上传进度监听推荐用XMLHttpRequest或Axios：前者通过xhr.upload.onprogress获取loaded/total计算百分比，后者用onUploadProgress配置项；需为各文件建独立请求以显示单独进度条，并注意CORS、并发控制与浏览器兼容性。
JavaScript 中实现表单多文件上传的进度监听，核心是利用 XMLHttpRequest 的 upload.onprogress 事件，或更现代的 fetch + ReadableStream（需手动分块），但实际项目中推荐用 XMLHttpRequest 或封装好的库（如 Axios）——因为它原生支持上传进度，且兼容性好、逻辑清晰。
使用 XMLHttpRequest 监听多文件上传进度
原生 XMLHttpRequest 是最直接支持上传进度的方式。关键点：每个文件单独发起请求（避免混淆进度），或合并为 FormData 后监听整体上传事件（适合小批量）。注意不能用 fetch 直接监听上传进度（它没有 upload 属性）。
- 创建
FormData，遍历input.files追加多个文件（可统一字段名如files[]） - 新建
XMLHttpRequest实例，绑定xhr.upload.onprogress - 在
onprogress中通过event.loaded和event.total计算百分比 - 发送前设置请求头（如需认证），用
xhr.send(formData)
处理多个文件各自的独立进度
如果需要显示每个文件的单独进度条（比如上传 5 个文件，显示 5 个实时百分比），就不能共用一个请求。应为每个文件创建独立的 XMLHttpRequest，并维护各自的状态对象。
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 遍历
input.files，对每个File构造独立的FormData（例如 append('file', file, file.name)） - 为每个请求生成唯一 ID 或索引，用于更新对应 UI 元素（如
document.getElementById(`progress-${i}`)） - 在
onprogress回调里更新该文件的进度值，避免互相覆盖 - 建议限制并发数（如最多同时传 3 个），用队列控制，防止浏览器连接耗尽
用 Axios 简化进度监听（推荐工程实践）
Axios 封装了 XMLHttpRequest，提供更简洁的 API。上传进度通过 onUploadProgress 配置项监听，支持 Promise 链和拦截器。
立即学习“Java免费学习笔记（深入）”；
- 安装：npm install axios
- 构造 FormData，循环 append 多个文件（同名字段会自动成为数组）
- 调用
axios.post(url, formData, { onUploadProgress: e => {...} }) -
e.loaded和e.total含义与原生一致；可安全用于 React/Vue 的响应式更新
注意事项和常见坑
进度监听不是万能的：后端必须正确设置响应头（如 Access-Control-Allow-Origin），且服务端不能缓冲整个请求体再返回，否则前端可能收不到中间进度。
- 确保服务端支持跨域上传（CORS 配置含
Access-Control-Allow-Headers: X-Requested-With等） -
onprogress在上传开始后才触发，loaded === 0时不要误判为失败 - 部分浏览器（如旧版 Safari）对
upload.onprogress触发频率有限制，不要依赖极高精度 - 大文件上传建议加断点续传或分片逻辑，单纯进度监听无法解决超时或中断问题
