Bootstrap 4 custom-file-input选择文件后不显示文件名求助

嘿，我之前也踩过这个坑！Bootstrap 4的custom-file-input组件要正常显示选中的文件名，得靠正确的HTML结构加一丢丢JS代码，给你分享最简单的解决步骤：

1. 先确认你的HTML结构是否正确 #

Bootstrap 4的自定义文件输入要求严格的嵌套结构，特别是label和input的关联必须到位：

<div class="custom-file">
  <!-- 给input设置唯一id，方便label关联 -->
  <input type="file" class="custom-file-input" id="customFile">
  <!-- label的for属性必须和input的id完全一致 -->
  <label class="custom-file-label" for="customFile">选择文件</label>
</div>

如果你的label没有设置正确的for属性，或者容器/元素的类名写错了（比如少写了custom-file容器），都会导致文件名无法正常显示。

2. 添加JS代码同步文件名 #

原生的文件输入不会自动把文件名同步到自定义标签上，所以我们需要监听input的change事件，手动更新label的文本：

如果你项目里用了jQuery： #

$('.custom-file-input').on('change', function() {
  // 处理路径，只获取文件名（避免C盘/Users/xxx这种完整路径）
  const fileName = $(this).val().split('\\').pop();
  // 更新label的文本
  $(this).next('.custom-file-label').text(fileName);
});

原生JS版本（无需依赖jQuery）： #

document.querySelectorAll('.custom-file-input').forEach(input => {
  input.addEventListener('change', function(e) {
    // 获取选中的第一个文件名（如果允许多选可以循环处理）
    const fileName = e.target.files[0].name;
    // 找到对应的label并更新文本
    const label = this.nextElementSibling;
    label.textContent = fileName;
  });
});

额外小提示 #

如果你的页面是动态生成的文件输入（比如通过JS新增的），可以用事件委托来处理，比如jQuery版本改成：

$(document).on('change', '.custom-file-input', function() {
  const fileName = $(this).val().split('\\').pop();
  $(this).next('.custom-file-label').text(fileName);
});

内容的提问来源于stack exchange，提问作者Terchila Marian