Bootstrap 的 form-control-file 仅提供样式封装，不包含文件读取、校验、预览、上传等交互逻辑，需开发者自行实现完整上传链路。
Bootstrap 本身不提供原生文件上传控件，它只对 做了基础样式封装；真要做出可用的上传页，你得自己补全交互逻辑、校验、预览和提交——否则用户点完“选择文件”就卡住，连个进度条都没有。
为什么 form-control-file 看起来像上传组件，实际却不能直接用
Bootstrap 4/5 中的 form-control-file（或 Bootstrap 5 的 form-control + type="file"）只是隐藏原生 input，用 label 模拟按钮，并加了基础边距和字体。它不处理：
- 文件读取与预览（比如图片缩略图）
- 多文件拖拽支持
- 大小/类型校验（仅靠
accept和multiple不够可靠） - 上传请求发送（
fetch或XMLHttpRequest得自己写） - 错误提示反馈（如 413 Payload Too Large）
直接只用 Bootstrap 样式，用户选完文件后页面毫无响应，容易误以为功能没生效。
用 input[type="file"] + label 实现可点击上传区（带图标和文字）
这是最轻量、兼容性最好的起点。关键在结构语义和 CSS 隐藏策略：
<div class="mb-3"> <label for="upload" class="form-label">上传简历（PDF / DOCX，≤5MB）</label> <input type="file" class="form-control" id="upload" accept=".pdf,.doc,.docx" multiple> </div>
注意三点：
-
accept是提示性属性，浏览器会过滤文件选择对话框，但服务端必须重新校验 - 别用
display: none隐藏input，会导致 Safari 失去焦点和部分无障碍支持；推荐用opacity: 0; position: absolute;覆盖在 label 上 - 如果想加上传图标（如 Cloud Upload），用 Bootstrap Icons 的
放在 label 里，别塞进 input
监听 change 事件做前端校验和预览
用户选中文件后，必须立刻检查并反馈，而不是等提交时才报错：
不支持的文件类型：${invalid.name}
常见坑：
-
e.target.files是FileList，不是数组，要用Array.from()或[...files]转换才能用find/map - IE11 不支持
FileReader的readAsDataURL对某些格式（如 HEIC），需降级处理 - 移动端 Safari 对
accept="image/*"会强制调起相机，若只想选图，加capture="user"反而更明确
用 FormData 提交 + fetch 处理上传请求
不要用 form.submit() 全页刷新；现代做法是构造 FormData 并用 fetch 发送：
HTTP ${res.status}
关键细节：
- 千万别手动设置
headers: {'Content-Type': 'multipart/form-data'}，这会让浏览器无法生成正确的boundary，导致后端收不到文件 - Node.js Express 需用
multer解析FormData；Django 用request.FILES；PHP 用$_FILES - 大文件上传建议加
AbortController支持取消，否则用户只能关掉标签页
真正难的不是样式，而是把“选中→校验→预览→上传→反馈”这整条链路串稳。很多项目卡在没处理 fetch 的 4xx/5xx 响应，或者忽略移动端文件路径不可读的问题——这些都不是 Bootstrap 能兜底的。
