克服Bootstrap 4文件输入的挑战

，尽管文件选择了文件选择，文件浏览器都会呈现持久的文本“选择文件...”。此问题源于自定义文件控制CSS类中的隐藏值。 While it is possible to retrieve the chosen file's value using JavaScript, changing the placeholder text can be more complex.

Customizing Placeholder Text and Button Display (Bootstrap 4.1 )

With the introduction of Bootstrap 4.1, the "Choose file..." placeholder resides in the custom-file-label class.要修改此文本，只需添加自定义CSS或SASS如下：

初始占位符和按钮文本存储在CSS伪元素中。要自定义它们，请使用：lang（en）:: after and：lang（en）::分别在选择器之前覆盖默认值。 2。检索选定的文件名并更新输入：

一旦选择了文件，就可以使用JavaScript获得其名称。但是，由于占位符是伪元素，因此没有直接的方法可以通过JavaScript进行操纵。取而代之的是，一旦选择了一个文件，请创建一个额外的CSS类来隐藏占位符：

在文件选择时，使用jquery在.custom-file-control上使用JQuery隐藏占位符并显示文件名：

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

自定义文件输入已在Bootstrap 5中删除。要更改占位符文本，您可以使用JavaScript或自定义CSS。例如：