克服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。例如：