bootstrap 4文件输入不显示文件名[重复]答案

【问题标题】：bootstrap 4 file input doesn't show the file name [duplicate]bootstrap 4文件输入不显示文件名[重复]
【发布时间】：2018-07-14 19:16:07
【问题描述】：

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>

知道如何在不复杂的情况下修复它吗？

【问题讨论】：

标签： jquery html css file-upload bootstrap-4

【解决方案1】：

您需要使用javascript显示所选文件的名称，如文档中所述：https://getbootstrap.com/docs/4.5/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>

【讨论】：

我可以简单地选择退出这个并简单地获取本机文件输入吗？
这设置了 C:\fakepath\myfile.ext 我在 linux 上看到 C:\... 这不是一个很好的解决方案很奇怪。
您可以操作字符串以删除“C\fakepath”以仅包含文件名。 var cleanFileName = fileName.replace('C:\\fakepath\\', " ");
@adityaekawade 我会简化这个说你可以用var fileName = $(this).val().replace('C:\\fakepath\\', " ");替换var fileName = $(this).val();听起来合理吗？
你最好使用e.target.files[0].name，就像下面的 Anuja。那只是给出没有假路径的名称......

【解决方案2】：

我也使用了以下内容：

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

【讨论】：

这让我成功了 90%。但是我有多个文件输入，因此需要按 ID 而不是类来定位。
如果你有多个文件输入，你可以使用这个：$(e.target).siblings('.custom-file-label').html(fileName); 代替
你应该使用.text(fileName)而不是.html(fileName)。
如果您只有 1 个文件输入，这会很好。多个文件输入将替换所有具有相同文件名的标签（您选择的最后一个文件）。
如果您在输入旁边有标签并且所有内容都在一个 div 中，您可以执行以下操作：$(e.target).parent('div').find('label').html(fileName)

【解决方案3】：

Anuja Patil 的答案仅适用于页面上的单个文件输入。如果有多个，则此方法有效。如果启用了multiple，此 sn-p 还将显示所有文件。

<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 循环的原因。

如果您在文件上传中从不处理多个文件，则可以使用这个更简单的 sn-p。

<script type="text/javascript">

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

</script>

【讨论】：

如果有人取消文件上传，e.target.files 将为空并抛出错误Uncaught TypeError: Cannot read property 'name' of undefined。如果您检查e.target.files 的长度，您可以避免控制台错误。虽然功能上没有任何问题。
@phyatt 不，它没有。至少在 Edge、Chrome 和 FireFox 中没有。
第二个更简单的 sn-p 示例。第一个例子很好。
@phyatt 我试图复制。但是打开文件对话框然后按取消时没有错误...？您使用的是什么浏览器/操作系统？
@phyatt，找到并修复了它。感谢您指出这一点！

【解决方案4】：

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

这个插件可以在有或没有 jQuery 的情况下使用，并且可以与 React an Angular 一起使用

【讨论】：

这很好用：codeply.com/go/uGJOpHUd8L/file-input

【解决方案5】：

此代码适用于我：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

世界上最好的。适用于动态创建的输入，并使用实际文件名。

【讨论】：

这个作品就像一个魅力
这很好用

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

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

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

【讨论】：