bootstrap没有内置带进度条的上传按钮，需用隐藏的input[type="file"]配合label自定义外观，再通过xmlhttprequest.upload.onprogress监听上传进度并更新bootstrap进度条及aria属性，同时前端校验文件大小以提升体验。
上传按钮本身不带进度条，得自己组合 input[type="file"] + xmlhttprequest 或 fetch
bootstrap 的 btn 和 progress 组件是独立的，没有内置“带进度条的上传按钮”这种复合控件。你看到的所谓“带进度条的上传按钮”，其实是用普通按钮触发文件选择，再手动监听上传过程、更新进度条状态。
常见错误现象：input[type="file"] 默认不可样式化，直接套 Bootstrap 按钮类没用；用 label 包裹隐藏它再自定义按钮外观，是唯一靠谱做法。
- 把
input[type="file"]设为opacity: 0或position: absolute; left: -9999px，用label[for]关联它 - 点击自定义按钮（比如
<button class="btn btn-primary">上传文件</button>）实际触发的是背后的input - 监听
input的change事件拿到FileList，再用XMLHttpRequest.upload.onprogress或fetch+ReadableStream（较新）上报并更新.progress-bar的style.width
XMLHttpRequest 是最稳的选择，fetch 做上传进度要绕路
fetch 本身不支持上传进度监听，除非用 ReadableStream + TransformStream 手动分块读取并上报，兼容性差（Chrome 109+，Safari 不支持），开发成本高。而 XMLHttpRequest 的 upload.onprogress 是标准 API，IE10+ 都支持，和 Bootstrap 完全不冲突。
使用场景：上传单个大文件（如图片、视频）、需要实时反馈给用户、后端是传统表单接收（multipart/form-data）。
- 必须用
new XMLHttpRequest()，不能用 jQuery 的$.ajax()封装（老版本会丢掉upload对象） - 设置
xhr.upload.onprogress = e => { if (e.lengthComputable) { bar.style.width = `${(e.loaded / e.total) * 100}%`; } } - 别忘了处理
xhr.upload.onloadstart显示进度条，xhr.upload.onloadend或onerror后隐藏或重置
Bootstrap 进度条要加 role="progressbar" 和 aria-valuenow 才算合规
光有视觉效果不够，如果项目有无障碍要求（或者你用的是 Bootstrap 5+），原生 <div class="progress"><div class="progress-bar"></div></div> 必须补上 ARIA 属性，否则屏幕阅读器读不出当前进度。
参数差异：aria-valuemin 默认是 0，aria-valuemax 默认是 100，所以你每次更新 style.width 时，也得同步设 aria-valuenow：
const bar = document.querySelector('.progress-bar');
bar.setAttribute('aria-valuenow', Math.round((e.loaded / e.total) * 100));
容易踩的坑：aria-valuenow 必须是整数，且不能超范围；漏掉 role="progressbar" 会导致整个进度条被忽略。
后端返回 413 Request Entity Too Large？不是前端问题，但得提前拦截
用户选了个 2GB 的视频点上传，前端进度条走到 10% 就卡住，控制台出现 POST http://xxx 413 (Request Entity Too Large) —— 这是 Nginx/Apache 限制了请求体大小，和你的 JS 无关，但体验极差。
性能 / 兼容性影响：在 change 事件里用 file.size 做前端校验，比等上传失败再提示更友好：
if (file.size > 50 * 1024 * 1024) { alert('文件不能大于 50MB'); return; }- 注意
file.size单位是字节，别写成file.size > 50 - 这个检查无法替代服务端校验（恶意用户可绕过），但能拦掉 90% 的误操作
事情说清了就结束。真正麻烦的从来不是怎么画那个进度条，而是怎么让上传中途不被网络抖动打断、怎么处理取消上传、怎么应对后端临时挂掉——这些都得你自己接住。
