绕过 Bootstrap 4 文件输入的限制

Bootstrap 4 提供了自定义文件输入组件来简化用户的文件选择。但是，如果您希望自定义“选择文件...”占位符文本或显示所选文件的名称，您可能会遇到一些挑战。

更改 Bootstrap 4.1 及更高版本中的占位符

自 Bootstrap 4.1 起，占位符文本驻留在 custom-file-label 元素中。您可以使用 CSS:

.custom-file-label::after {
  content: "Select file...";
}

调整文件按钮文本

Bootstrap 4.1 没有提供更改文件按钮文本的简单方法。要实现此目的，请考虑添加一些自定义样式：

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

在 Bootstrap 4.4 中显示所选文件名

Bootstrap 4.4 允许您使用纯 JavaScript 显示所选文件的名称：

document.querySelector('.custom-file-input').addEventListener('change', function(e) {
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})

Pre-Bootstrap 4.1 选项：

隐藏初始占位符：

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

显示所选文件名:

$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})

这些方法为自定义 Bootstrap 4 的文件输入组件提供了灵活性，使您能够根据自己的特定要求进行定制。