html5文件上传实时进度显示核心在于xhr的upload事件监听而非formdata。1.用file对象构造formdata并post发送；2.监听onprogress，通过loaded/total计算百分比；3.更新progress或div进度条ui；4.处理abort、空文件、网络错误等边界情况。
HTML5 中利用 FormData 实现文件上传并实时展示进度百分比，核心不在于 FormData 本身（它只是数据容器），而在于 XMLHttpRequest 的 upload 事件监听能力。FormData 负责正确打包文件，XHR 负责发送并触发进度事件，再结合 event.loaded 和 event.total 计算百分比即可。
1. 正确构造 FormData 并发起 XHR 请求
FormData 必须用文件对象（File）而非路径字符串来 append；同时请求必须使用 POST，且不能手动设置 Content-Type（让浏览器自动设为 multipart/form-data 并带上 boundary）：
- 获取
input[type="file"]的.files[0] - 创建
new FormData()，调用.append('file', file)（字段名需与后端约定一致） - 创建
XMLHttpRequest，用.open('POST', '/upload')，直接.send(formData)
2. 监听 xhr.upload.onprogress 计算实时百分比
这个事件在上传过程中高频触发，每次携带 event.loaded（已上传字节数）和 event.total（总字节数）。只要二者都有效，就能安全计算：
- 判断
event.lengthComputable === true，避免 total 为 0 或 undefined 导致 NaN - 百分比 =
Math.round((event.loaded / event.total) * 100) - 把结果更新到页面元素，比如
document.getElementById('percent').innerText = percent + '%'
3. 同步更新 UI 进度条（如 Bootstrap 或原生 progress）
建议用语义化 <progress></progress> 标签或 div 模拟进度条，保持视觉反馈及时：
- 若用原生
<progress value="0" max="100"></progress>，只需更新.value属性 - 若用 Bootstrap 进度条，动态修改
style.width和内部文本，例如：
`document.getElementById('bar').style.width = percent + '%';` - 上传完成时别忘了处理
xhr.onload，并重置状态或显示成功提示
4. 补充：取消上传与边界情况处理
用户可能中途点击取消，或选择空文件——这些虽不直接影响进度计算，但属于完整体验必需项：
- 调用
xhr.abort()可立即终止上传，触发xhr.upload.onabort - 上传前校验
files.length > 0和file.size > 0，防止无效请求 - 网络异常时监听
xhr.onerror，避免进度卡在 99% 无响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
