bootstrap 5 不支持为 input[type="file"] 添加 .form-control 类，因其原生控件受浏览器安全限制无法被 css 完全控制，强行添加会导致错位、截断或 safari/ie 失效；正确做法是隐藏原生 input 并用 label 和自定义样式模拟。
Bootstrap 5 原生 input type="file" 为什么不能直接加 .form-control
因为 Bootstrap 5 明确放弃对 input[type="file"] 的样式封装——它不响应 .form-control 的尺寸、边框、圆角或颜色，也不支持 :focus 状态样式。强行添加只会让控件错位、截断或在 Safari/IE 中失效。
根本原因在于浏览器对 file input 的安全限制：无法通过 CSS 读取或修改其内部结构（比如“选择文件”文字），所以 Bootstrap 选择不碰这个雷区。
常见错误现象包括：
– 加了 .form-control 后按钮变窄、文字被裁切
– 在 iOS Safari 中点击无反应
– 使用 display: none 隐藏原生 input 后，IE11 完全失去文件选择能力
正确做法是：
– 用 position: absolute; clip: rect(0 0 0 0) 或 opacity: 0 隐藏原生 input
– 用 label 包裹它，并设置 for 属性关联 id
– 自定义按钮和文件名显示区域，手动同步状态
– 必须加 aria-describedby 指向提示文案，否则屏幕阅读器无法识别功能
bootstrap-fileinput 插件是否还值得用？
它仍是目前最成熟的 Bootstrap 文件上传增强方案，但要注意它本质是 Bootstrap 3.x 时代的产物，虽兼容 4/5，但存在几个硬伤：
– 不支持原生 FormData 多文件数组提交：如果你用表单 submit 提交（非插件自带 upload），request.files 在 Flask/Django/Express 中往往只拿到最后一个文件，因为插件默认把多次选择覆盖成单个 FileList 对象
– 初始化时若未设 showUpload: false，会多出一个与业务逻辑冲突的上传按钮
– allowedFileExtensions 在某些浏览器中仅校验后缀，不校验 MIME 类型，容易绕过
– 主题（如 themes/explorer）依赖 FontAwesome 4/5，与新项目图标库易冲突
适合它的场景：
– 需要图片预览、拖拽、分片上传、断点续传
– 后台已适配其 multipart 格式（字段名为 file_data[] 而非标准 files[]）
– 团队熟悉其事件体系（fileuploaded、fileerror）
不适合的场景：
– 只需基础多文件选择 + 表单一起提交
– 项目已用现代构建工具（Vite/Webpack），不想引入 jQuery 依赖
– 需要 SSR 支持或严格无障碍合规（插件部分 aria 属性动态生成不稳）
不用插件，三行 CSS + JS 实现可访问的上传框
这是当前最轻量、可控性最强的做法，适用于大多数管理后台或表单场景：
关键 HTML 结构：<div class="file-input">
<br><code><input type="file" id="myFile" name="files" multiple accept="image/*,.pdf" aria-describedby="fileHelp"><label for="myFile" class="btn btn-outline-primary">选择文件</label><span id="fileHelp" class="form-text">支持 JPG/PNG/PDF，最多 5 个</span><span class="file-name text-muted small"></span>
