繞過 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 的文件輸入元件提供了靈活性，使您能夠根據自己的特定要求進行自訂。