web-dev-qa-db-ja.com

Bootstrap 4ファイル入力

bootstrap 4ファイルブラウザに苦労しています。 custom-file-controlを使用すると、常にファイル値の選択が表示されます。 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

javascriptjquerycsstwitter-bootstrapbootstrap-4
44
Matej Vrzala M4

2018年に更新

ブートストラップ4.1 +

Bootstrap 4.1では、「ファイルを選択...」プレースホルダーテキストがcustom-file-labelに設定されます。

<div class="custom-file" id="customFile" lang="es">
        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
        <label class="custom-file-label" for="exampleInputFile">
           Select file...
        </label>
</div>

[参照]ボタンのテキストを変更するには、CSSまたはSASSを少し追加する必要があります。また、lang=""属性を使用して 言語翻訳が機能する にも注意してください。

.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つの問題があると思います。

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

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

Bootstrap 4では、initialプレースホルダー値が、HTML言語に基づくCSS疑似custom-file-control要素を使用して::afterに設定されます。最初のファイルボタン（実際にはボタンではありませんが、ボタンのように見えます）は、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();
})

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

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

ファイルを選択したら、jQueryを使用して.selectedクラスを.custom-file-controlで切り替えます。これにより、初期プレースホルダー値が非表示になります。次に、.form-control-fileスパンにファイル名の値を入力します...

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

その後、必要に応じてファイルのアップロードまたは再選択を処理できます。

Codeplyのデモ（アルファ6）

55
Zim

ファイルブラウザの言語を変更する場合：
ZimSystem の代わりに（CSSをオーバーライド）、bootstrap docsにより、よりエレガントなソリューションが提案されています。カスタムbootstrapスタイルを構築するSCSSでの言語の追加
ここでそれについて読む： https://getbootstrap.com/docs/4.0/components/forms/#file-browser

注：これを機能させるには、ドキュメントにlang属性を適切に設定する必要があります

ファイル選択の値を更新する場合：
次のようなインラインjsで実行できます。

   <label class="custom-file">
      <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>
   </label>

注：.split('\\').slice(-1)[0]部分はC：\ fakepath \プレフィックスを削除します

7
Razvan Pocaznoi

Bootstrap 4.の時点で、ラベルタグ内のプレースホルダーとボタンテキストを変更できます。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-file">
  <input type="file" class="custom-file-input" id="exampleInputFile">
  <label class="custom-file-label" for="exampleInputFile" data-browse="{Your button text}">{Your placeholder text}</label>
</div>
5
Andrei Veshtard

ブートストラップ4

詳細は こちらhttps://learncodeweb.com/snippets/browse-button-in-bootstrap-4-with-select-image-preview/

今日、複数のファイルをアップロードするオプションを備えた参照ボタンを作成する必要があります。上記のすべてのスニペットは私には適していません。

official Bootstrap example も、複数のファイルを選択すると機能しません。

私はこのコードを思いついて、将来他の人を助けるかもしれません。

<div class="container mt-5">
  <h1 class="text-center">Bootstrap 4 Upload multiple files</h1>
  <div class="col-sm-4 mr-auto ml-auto border p-4">
  <form method="post" enctype="multipart/form-data" action="upload.php">
    <div class="form-group">
      <label><strong>Upload Files</strong></label>
      <div class="custom-file">
        <input type="file" name="files[]" multiple class="custom-file-input" id="customFile">
        <label class="custom-file-label" for="customFile">Choose file</label>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" name="upload" value="upload" id="upload" class="btn btn-block btn-dark"><i class="fa fa-fw fa-upload"></i> Upload</button>
    </div>
  </form>
</div>

Jsコードを以下に示します。

$(document).ready(function() {
  $('input[type="file"]').on("change", function() {
    let filenames = [];
    let files = document.getElementById("customFile").files;
    if (files.length > 1) {
      filenames.Push("Total Files (" + files.length + ")");
    } else {
      for (let i in files) {
        if (files.hasOwnProperty(i)) {
          filenames.Push(files[i].name);
        }
      }
    }
    $(this)
      .next(".custom-file-label")
      .html(filenames.join(","));
  });
});

実際のコード例は here で与えられます。

https://codepen.io/mianzaid/pen/GeEbYV

1
Zaid Bin Khalid

CSSファイルにこれを追加するだけで機能します。

.custom-file-label::after{content: 'New Text Button' !important;}
1
Robson Sousa

@Elnoorの回答に基づくソリューションですが、複数のファイルアップロードフォーム入力を使用し、「fakepathハック」なしで動作します。

HTML：

<div class="custom-file">
    <input id="logo" type="file" class="custom-file-input" multiple>
    <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS：

$('input[type="file"]').on('change', function () {
    let filenames = [];
    let files = document.getElementById('health_claim_file_form_files').files;

    for (let i in files) {
        if (files.hasOwnProperty(i)) {
            filenames.Push(files[i].name);
        }
    }

    $(this).next('.custom-file-label').addClass("selected").html(filenames.join(',    '));
});
0
Sicaa

Jqueryの助けを借りて、このようにすることができます。コード：

$("input.custom-file-input").on("change",function(){if(this.files.length){var filename=this.file[0].name;if(filename.length>23){filename=filename.substr(0,11)+"..."+filename.substr(-10);}$(this).siblings(".custom-file-label").text(filename);}});
0
sakhii