多文件上传进度条需为每个文件单独发起请求并监听xhr.upload.onprogress事件，动态更新对应dom进度条；须避免单个formdata批量上传导致无法区分进度，同时限制并发数防阻塞。

多文件上传进度条的核心是利用 XMLHttpRequest 的 upload.onprogress 事件，配合每个文件单独发起请求（或使用 FormData 批量上传），再通过 DOM 实时更新对应进度条的宽度和文字。关键在于：不能依赖单个全局进度，而要为每个文件维护独立的进度状态。

1. HTML 结构：为每个文件预留进度条容器

上传前先生成可识别的 DOM 容器，比如用文件名或索引作为唯一标识：

<input type="file" id="fileInput" multiple><div id="progressList"></div>

选中文件后，动态为每个文件创建进度条区块：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 用 file.name 或自增 ID 作为 key，避免重名冲突
• 每个区块包含：文件名、当前进度百分比、进度条 <div class="progress-bar">、状态文字（如“上传中…”）<li>把区块插入 <code>#progressList，便于后续更新

2. 逐个上传 + 监听单个请求的 upload.onprogress

不推荐一次性把所有文件塞进一个 FormData 发送——那样只能拿到整体进度，无法区分各文件状态。更稳妥的做法是循环调用 fetch 或 XMLHttpRequest，对每个请求绑定自己的进度监听：

• 创建 new XMLHttpRequest()
• 在 xhr.upload.onprogress = e => { ... } 中计算当前文件进度：Math.round((e.loaded / e.total) * 100)
• 用文件标识（如 name）找到对应 DOM 元素，更新其进度条宽度和文字
• 注意：e.total 在某些环境（如跨域、服务端未设 Content-Length）可能为 0，需做 e.total && ... 判断，否则显示 NaN

3. 处理完成与错误：更新状态文案

每个请求的 xhr.onload 和 xhr.onerror 是更新最终状态的时机：

• onload：状态码为 2xx 时设为“✅ 上传成功”，进度条拉满到 100%
• onerror 或 onloadend 且状态异常时，设为“❌ 上传失败”，可加重试按钮
• 避免用 setTimeout 模拟进度（不真实、难调试），坚持用原生事件驱动

4. 小优化：限制并发数，防止浏览器卡死

同时上传几十个大文件容易阻塞主线程或触发浏览器限制。建议用简单队列控制并发：

• 设定最大并发数（如 3），维护一个运行中请求数 activeCount
• 每次启动上传前判断 activeCount ，满足才发请求，并 <code>activeCount++
• 请求结束（无论成功失败）后 activeCount--，并自动触发下一个待传文件
• 这样既保证体验流畅，又让进度条更新有序不打架