Bootstrap Fileinput 文件上传 v5.5.4

官方已有文件选择框的基础样式（.form-control file input），但没有上传预览能力。bootstrap-fileinput 在其基础上提供图片预览、多文件队列、类型与大小限制等功能；5.x 兼容 Bootstrap 5.3，注意它依赖 jQuery。

官方对照

先看 Bootstrap 官方能做什么、本库补齐了什么。

官方已有

对比维度	Bootstrap 官方	bootstrap-fileinput
能力定位	`<input type="file" class="form-control">` 基础样式，仅一个选择按钮	带预览、队列、进度的专业上传控件
核心特性	只能选择文件，选完不可见内容、不可排序	图片/文本预览、多文件队列、扩展名与大小限制、拖拽区域、主题皮肤、AJAX 上传
依赖与体积	零依赖	jQuery 必需；5.x 起兼容 Bootstrap 5；图标默认留空（不强制 Font Awesome）
适用场景	普通表单里的单个附件	商品图片、证件照、批量上传等需要预览与校验的场景
与 Bootstrap 5.3	原生支持	5.5.x 官方声明支持 Bootstrap 5；下方示例为纯前端演示（关闭上传按钮，不真正提交）

对照表说明

结论：官方「已有」文件选择框的基础样式，但「没有」上传预览能力；
需要预览/校验/队列时使用 bootstrap-fileinput，已在 Bootstrap 5.3.8 下真实渲染验证。

引入方式

通过 jsDelivr 固定版本引入。依赖顺序：jQuery → Bootstrap bundle → fileinput.js → 中文语言包；样式放 <head>。本页未引入图标字体，浏览/移除按钮不显示图标。

引入代码

<!-- 样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.4/css/fileinput.min.css" rel="stylesheet">

<!-- 脚本：jQuery 必须最先加载 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.4/js/fileinput.min.js"></script>
<!-- 中文提示（可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.4/js/locales/zh.js"></script>

基础示例

在原生 <input type="file"> 上调用 $(…).fileinput() 即完成初始化。下方控件已真实渲染：点击选择图片后可立即看到缩略图预览，可多张、可移除。showUpload:false 关闭上传按钮（纯前端演示，不向服务器提交）。

上传图片（可多选）

HTML + 初始化 JS

<input id="fi-basic" type="file" multiple>

<script>
$(function () {
  $('#fi-basic').fileinput({
    language: 'zh',
    showUpload: false,          // 纯前端预览，不显示上传按钮
    showRemove: true,
    maxFileCount: 5,
    browseLabel: '选择图片',
    browseIcon: '',             // 不依赖图标字体
    removeIcon: ''
  });
});
</script>

上传选项说明

常用校验选项：allowedFileExtensions 限制扩展名、maxFileSize 限制单文件大小（KB）、maxFileCount 限制数量、msgSelected 自定义已选提示。选中不合规文件时会弹出中文错误提示。

仅允许 JPG/PNG/GIF，单张 ≤ 500KB，最多 3 张

HTML + 初始化 JS

<input id="fi-opts" type="file">

<script>
$(function () {
  $('#fi-opts').fileinput({
    language: 'zh',
    showUpload: false,
    allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],
    maxFileSize: 500,            // KB
    maxFileCount: 3,
    browseLabel: '选择图片',
    browseIcon: '',
    removeIcon: '',
    msgSelected: '{n} 张图片已选中'
  });
});
</script>