Bootstrap 4 のファイル入力ラベルを動的に更新するにはどうすればよいですか?

Bootstrap 4 ブートボックスの概要

課題を理解する

Bootstrap 4 では、カスタム ファイル入力コンポーネントはファイルの選択に関係なく、定数の「ファイルを選択」ラベル。選択したファイル名でこのラベルを動的に更新するには、JavaScript と CSS の操作を理解することが不可欠です。

Bootstrap 4 ファイル入力ソリューション

バージョン 4.5以上:

• カスタム ファイル入力は利用できなくなりました。ファイル ボタンのテキストをカスタマイズするには、CSS または JavaScript を使用する必要があります。

バージョン 4.1 以降:

• プレースホルダー テキストはカスタム ファイルにあります。 -file-label 要素。

• CSS 経由でカスタム ラベル テキストを設定します:

  <code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
  }</code>

  ログイン後にコピー

Bootstrap 4.1 以降の代替:

• 次のようなカスタム ファイル入力プラグインを利用します: https://www.codeply.com/go/uGJOpHUd8L/file-input

オリジナルBootstrap 4 Alpha 6 のソリューション:

初期プレースホルダーとボタン テキストのカスタマイズ:

• CSS を使用してデフォルトのプレースホルダーとボタン テキストをオーバーライドする:

  <code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
  }
  
  #customFile .custom-file-control:lang(en)::before {
  content: "Click me";
  }</code>

  ログイン後にコピー

ファイル名の取得と入力値の更新:

• JavaScript/jQuery を使用して選択したファイルのファイルを取得しますname:

  <code class="javascript">$('.custom-file-input').on('change', function() {
    var fileName = $(this).val();
  });</code>

  ログイン後にコピー

• CSS クラスを使用して、ファイルが選択されたときにプレースホルダー テキストを非表示にします:

  <code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
  }</code>

  ログイン後にコピー

• CSS を切り替えますファイル選択のクラスを作成し、フォーム コントロール ファイル スパンにファイル名を挿入します:

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

  ログイン後にコピー

以上がBootstrap 4 のファイル入力ラベルを動的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。