Bootstrap 4 ファイルの入力

bootstrap4のファイルブラウザで苦労しています。custom-file-controlを使用すると、Choose file valueが常に表示されます。 https://v4-alpha.getbootstrap.com/components/forms/#file-browser

ファイルが選択された後に choose file の値を変更したいと思います。この値は実際には css の ``.custom-file-control:lang(en)::after ``` に隠されており、javascript でアクセスして変更する方法がわかりません。選択されたファイルの値は次のようにして得ることができます。

document.getElementById("exampleInputFile").value.split("\\").pop();

ではなく、変更する必要があります。

.custom-file-control:lang(en)::after {
    content: "Choose file...";
}

何らかの形で

リンク： http://codepen.io/Matoo125/pen/LWobNp

Matej Vrzala M4
編集された質問 6日 4月 2017 в 9:54
プログラミング
javascript jquery css twitter-bootstrap bootstrap-4
6日 4月 2017 в 8:52
3 ビュー
ソリューション

2018年に更新されました。

ブートストラップ4.1+を使用しています。

Bootstrap 4.1では、custom-file-labelに、"Choose file..."のプレースホルダーテキストが設定されるようになりました。

<div class="custom-file" id="customFile" lang="es">
        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">

           Select file...

</div>

2.1 "Browse" ボタンのテキストを変更するには、少し余分なCSSまたはSASSが必要です。また、lang=""属性を使用して、language translation worksに注目してください。

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

https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)

もうひとつのBootstrap 4.1オプション。

別の方法として、このカスタムファイル入力プラグインを使用することもできます。

https://www.codeply.com/go/uGJOpHUd8L/file-input

Bootstrap 4 Alpha 6 (オリジナル回答)

2つの異なる問題があると思います。


        <input type="file" class="custom-file-input">
        <span class="custom-file-control form-control-file"></span>

*1 - 初期のプレースホルダーとボタンのテキストを変更する方法**。

Bootstrap 4では、initial プレースホルダーの値は、HTML言語に基づいたCSSの擬似的な ::after 要素で custom-file-control に設定されます。また、初期ファイルボタン(実際にはボタンではないが、ボタンのように見える)は、CSSの擬似的な ::before 要素で設定されます。これらの値は、CSSで上書きすることができます...

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

2 - 選択されたファイル名の値を取得し、その値を表示するために入力を更新する方法。

ファイルが選択されると、その値はJavaScript/jQueryを使用して取得できます。

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

しかし、入力用のプレースホルダーテキストは疑似要素なので、JavaScript/jQueryでこれを操作する簡単な方法はありませんとなります。しかし、ファイルが選択されると擬似コンテンツを非表示にする別のCSSクラスを用意することはできます。

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

jQuery を使用して、ファイルが選択されると .custom-file-control の .selected クラスを切り替えます。これにより、初期のプレースホルダーの値が隠されます。次に、ファイル名の値を .form-control-file のスパン...

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

これで、必要に応じてファイルのアップロードや再選択を処理することができます。

Codeply (alpha 6)のデモ

Zim
編集した答え 8日 4月 2019 в 11:00
解説 (12)

私はこの方法で解決しました。

Html:

<div class="custom-file">
   <input id="logo" type="file" class="custom-file-input">
   Choose file...
</div>

JSです。

$('.custom-file-input').on('change', function() { 
   let fileName = $(this).val().split('\\').pop(); 
   $(this).next('.custom-file-label').addClass("selected").html(fileName); 
});

注意。ajax333221]1さんが、選択されたファイル名が長すぎる場合にラベル内のオーバーフローを隠す.text-truncateクラスについて言及してくださったことに感謝します。

Elnoor
編集した答え 9日 7月 2018 в 4:13
解説 (8)

_ファイルブラウザの言語を変更するには:__。 ZimSystem]1が述べていること(CSSを上書きする)の代わりに、よりエレガントな解決策がbootstrapのドキュメントで提案されています: SCSSで言語を追加することで、カスタムbootstrapスタイルを構築する。 これについてはこちらをご覧ください: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Note: これを動作させるためには、あなたのドキュメントでlang属性を適切に設定する必要があります。

ファイル選択時の値の更新について: このようにインラインjsで行うことができます。


      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
      <span class="custom-file-control"></span>

注: .split('\\').slice(-1)[0]の部分は、_C:\\の接頭辞を削除しています。

解説 (1)