progress标签需用javascript手动更新value属性来模拟真实上传进度；核心是监听xmlhttprequest.upload.onprogress事件，根据e.loaded/e.total计算百分比，并确保e.lengthcomputable为true。
Progress标签本身不自动更新，需用JavaScript手动控制其value属性来模拟上传进度；关键在于合理映射上传过程中的数据量变化，而非简单定时器递增。
理解progress标签的核心属性
<progress></progress> 是语义化进度指示器，依赖两个关键属性：
- value：当前完成值（必须在 min 和 max 之间，默认 min=0, max=100）
- max：总任务量（如文件总字节数，或归一化为100）
浏览器会自动渲染填充比例和可访问性信息。不要用 CSS 伪造进度条——它失去语义和屏幕阅读器支持。
用XMLHttpRequest监听真实上传事件
真正模拟“真实动态”，必须基于实际上传行为，而非假计时。核心是监听 upload.onprogress：
const xhr = new XMLHttpRequest();
const file = document.querySelector('#file-input').files[0];
<p>xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
document.querySelector('progress').value = percent;
}
});</p>
注意：e.lengthComputable 必须为 true 才能安全计算——这取决于服务端是否返回 Content-Length 或使用分块编码时的协商能力。多数现代后端（如 Express、Nginx 默认配置）支持。
适配 Fetch API（需配合 ReadableStream 或第三方库）
原生 Fetch 不直接暴露上传进度，但可通过 ReadableStream 分块读取并手动发送：
- 将文件转为
ArrayBuffer或使用file.stream() - 用
fetch发起 POST，请求体为自定义流 - 在每块写入时更新
progress.value
更实用的做法是改用 XMLHttpRequest，或引入轻量库如 StreamSaver.js（适合大文件）或封装好的上传工具（如 axios 的 onUploadProgress 配置）。
增强体验：处理加载状态与边界情况
仅更新 value 不够，还需反馈状态逻辑：
- 上传开始前设
progress.value = 0，并移除hidden属性 - 成功时设
value = 100，可加微动效或切换文案（如显示“✅ 上传完成”） - 失败时设
value = 0并提示错误，避免残留进度误导用户 - 若上传极快（如小文件），可加
setTimeout短暂延展动画，防止进度条“闪一下就消失”
别忘了给 progress 添加 ARIA 属性提升可访问性：aria-label="文件上传进度" 或绑定 aria-labelledby。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
