Question

我在Bootstrap 4中遇到了自定义文件输入类的问题。在我选择了要上传的文件后，文件名不显示。

我使用此代码：

<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>

任何想法如何解决它而不会太复杂？

Answer 1

您需要使用javascript来显示所选文件的名称，如文档中所述：https://v4-alpha.getbootstrap.com/components/forms/#file-browser

您可以在这里找到解决方案：Bootstrap 4 File Input

这是你的例子的代码：

<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>

Answer 2

我已经使用以下命令：

count

Answer 3

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>

Answer 4

当您有多个文件时，一种想法是仅显示第一个文件和隐藏文件名的数量。

$('.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);
});

Answer 5

如果需要，可以使用推荐的Bootstrap插件来动态化您的自定义文件输入：https://www.npmjs.com/package/bs-custom-file-input

此插件可以与jQuery一起使用，也可以不与jQuery一起使用，并且可以与React Angular一起使用

Answer 6

这适用于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>

Answer 7

此代码对我有用：

<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>

Answer 8

Johann-S解决方案效果很好。（看起来他创建了很棒的插件）

Bootstrap 4.3文档示例页面使用此插件来修改文件名：https://github.com/Johann-S/bs-custom-file-input

使用Bootstrap custom file input classes。将插件添加到您的项目中，然后将此代码添加到页面上的脚本文件中。

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

bootstrap 4文件输入不显示文件名

8 个答案: