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 のファイル入力コンポーネントを柔軟にカスタマイズできるため、特定の要件に合わせて調整できます。