必须显式配置 language: 'zh' 才生效,仅引入 zh.js 无效;需确保 zh.js 在 fileinput.js 后加载,且初始化时指定 language,否则 UI 全为英文。

bootstrap-fileinput 的 language 配置必须显式指定
不写 language: 'zh',插件默认用英文,哪怕你引入了 zh.js 也不会自动生效。这个参数是开关,不是可选提示——它控制整个 UI 文本(如“选择文件”“上传失败”“取消”“移除”)的渲染语言。
常见错误是只引入了 js/locales/zh.js,但初始化时漏掉配置项,结果界面上全是英文,还以为语言包没加载成功。
- 必须在
fileinput()初始化对象中写明language: 'zh' - 如果用
data-language="zh"属性方式,也要确保属性写在<input>标签上,且 JS 初始化前 DOM 已就绪 - 多个 fileinput 实例要分别设置,不能靠全局变量覆盖
zh.js 文件路径和加载顺序不能错
zh.js 是独立语言模块,不是自动合并进 fileinput.js 的。它必须在 fileinput.js 之后加载,否则会报 Uncaught ReferenceError: locale is not defined 或中文文本不替换。
典型正确顺序:
<script src="js/fileinput.min.js"></script> <script src="js/locales/zh.js"></script>
注意:zh.js 里定义的是 locale.zh 对象,如果加载早于主库,locale 还没声明,自然挂掉。
- 别把
zh.js放在fileinput.js前面 - 别用
async或defer加载zh.js,除非你手动控制依赖顺序 - CDN 引入时,确认 URL 可访问,比如
https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.5.2/js/locales/zh.js
中文文案不全?检查是否用了过时的 locale 文件
旧版 zh.js(比如 4.x 分支的)缺部分新字段,例如 dropZoneTitle、fileActionSettings 下的按钮文案、或 previewZoomButtonTitles。这些在新版插件里新增,但老语言包没同步更新,就会回退到英文。
解决方法不是硬改 JS,而是换对应版本的语言包:
- Bootstrap Fileinput v5.x 项目,请用 v5.x 发布包里的
js/locales/zh.js - GitHub 仓库中
js/locales/目录下有按版本维护的语言文件,别直接复制网上搜到的碎片代码 - 若仍缺字段,可在初始化时内联补全,例如:
dropZoneTitle: '拖放文件到这里(支持多文件)'
自定义文案覆盖比改 locale 文件更可靠
业务中常有“上传”要改成“提交附件”、“移除”要改成“删除”这类定制需求。与其反复 patch zh.js,不如在初始化时直接覆盖:
$("#file-input").fileinput({
language: 'zh',
browseLabel: '选择附件',
removeLabel: '删除',
uploadLabel: '提交',
dropZoneTitle: '拖拽上传(支持图片/PDF/ZIP)'
});
所有带 Label、Title、Msg 后缀的配置项都支持字符串覆盖,优先级高于 zh.js 中的定义。这种方式不侵入第三方资源,升级插件也不用再对齐语言包。
真正容易被忽略的是:有些文案藏在嵌套对象里,比如 fileActionSettings.showRemove: false 关闭按钮后,removeLabel 就失效了——得先看清楚控件实际渲染了哪些元素,再决定覆盖哪一项。


















