web-dev-qa-db-ja.com

bootstrap 4ファイル入力にファイル名が表示されない

Bootstrap 4.のcustom-file-inputクラスに問題があります。ファイル名をアップロードするファイルを選択した後、表示されません。

私はこのコードを使用します：

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-primary">Upload</button>
  </div>
</div>

あまり複雑にならずにそれを修正する方法はありますか？

jqueryhtmlcssfile-uploadbootstrap-4
41
Terchilă Marian

ドキュメントに記載されているように、javascriptを使用して、選択したファイルの名前を表示する必要があります。 https://v4-alpha.getbootstrap.com/components/forms/#file-browser

ここで解決策を見つけることができます： ブートストラップ4ファイル入力

それはあなたの例のコードです：

<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="input-group mb-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile02"/>
                <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-primary">Upload</button>
            </div>
        </div>
        <script>
            $('#inputGroupFile02').on('change',function(){
                //get the file name
                var fileName = $(this).val();
                //replace the "Choose a file" label
                $(this).next('.custom-file-label').html(fileName);
            })
        </script>
    </body>
</html>
50
debe

私は同じために以下を使用しました：

<script type="application/javascript">
    $('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        $('.custom-file-label').html(fileName);
    });
</script>
32
Anuja Patil

Anuja Patilの答えは、ページ上の単一のファイル入力でのみ機能します。これは、複数ある場合に機能します。 multipleが有効になっている場合、このスニペットにはすべてのファイルも表示されます。

<script type="text/javascript">

    $('.custom-file input').change(function (e) {
        var files = [];
        for (var i = 0; i < $(this)[0].files.length; i++) {
            files.Push($(this)[0].files[i].name);
        }
        $(this).next('.custom-file-label').html(files.join(', '));
    });

</script>

$(this).next('.custom-file-label').html($(this)[0].files.join(', '));は機能しないことに注意してください。そのため、forループが必要です。

ファイルのアップロードで複数のファイルを使用しない場合は、この単純なスニペットを使用できます。

<script type="text/javascript">

    $('.custom-file input').change(function (e) {
        $(this).next('.custom-file-label').html(e.target.files[0].name);
    });

</script>
17
VDWWD
$(document).on('change', '.custom-file-input', function (event) {
    $(this).next('.custom-file-label').html(event.target.files[0].name);
})

すべての世界のベスト。動的に作成された入力で動作し、実際のファイル名を使用します。

6
kejodion

複数のファイルがある場合、最初のファイルと隠しファイル名の数のみを表示するという考え方があります。

$('.custom-file input').change(function() {
    var $el = $(this),
    files = $el[0].files,
    label = files[0].name;
    if (files.length > 1) {
        label = label + " and " + String(files.length - 1) + " more files"
    }
    $el.next('.custom-file-label').html(label);
});
3
Vassilis

これはBootstrap 4.1.3で機能します：

<script>
    $("input[type=file]").change(function () {
        var fieldVal = $(this).val();

        // Change the node's value by removing the fake path (Chrome)
        fieldVal = fieldVal.replace("C:\\fakepath\\", "");

        if (fieldVal != undefined || fieldVal != "") {
            $(this).next(".custom-file-label").attr('data-content', fieldVal);
            $(this).next(".custom-file-label").text(fieldVal);
        }
    });
</script>
3
kexxcream

必要に応じて、推奨されるBootstrapプラグインを使用して、カスタムファイル入力を動的に作成できます。 https://www.npmjs.com/package/bs-custom-file-input

このプラグインは、jQueryの有無にかかわらず使用でき、React Angularで動作します

2
Johann-S

Johann-Sソリューションは非常に効果的です。 （そして彼は素晴らしいプラグインを作成したようです）

Bootstrap 4.3ドキュメントのサンプルページでは、このプラグインを使用してファイル名を変更します。 https://github.com/Johann-S/bs-custom-file-input

Bootstrapカスタムファイル入力クラス を使用します。プラグインをプロジェクトに追加し、このコードをページ上のスクリプトファイルに追加します。

$(document).ready(function () {
  bsCustomFileInput.init()
})
0
philyawj

このコードは私のために機能します：

<script type="application/javascript">
    $('#elementID').change(function(event){
        var fileName = event.target.files[0].name;
        if (event.target.nextElementSibling!=null){
            event.target.nextElementSibling.innerText=fileName;
        }
    });
</script>
0
Jorge Santos Neill