logo标签列表

Bootstrap 4文件输入框未显示文件名

jqueryhtmlcssfile-uploadbootstrap-4
116
我对Bootstrap 4中的custom-file-input类有问题。选择要上传的文件后，文件名不显示。 我使用以下代码：

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

有什么办法可以不太复杂地修复它吗？

9个回答
149

根据文档，您需要使用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>
我能否选择退出此项并仅使用本地文件输入？ - Victor
13
这个设置是C:\fakepath\myfile.ext，我在Linux上使用，看到C:...感觉很奇怪，不是一个好的解决方案。 - Pablo Pazos
11
你可以操纵字符串以删除 "C\fakepath"，只保留文件名。 var cleanFileName = fileName.replace('C:\\fakepath\\', " "); - adityaekawade
5
可以这样简化：将var fileName = $(this).val();替换为var fileName = $(this).val().replace('C:\\fakepath\\', " ");，这样说是否合理？ - alexjhart
为什么要加一个额外的空格？只需要执行 fileName.replace('C:\fakepath\', " ")。 - Danish Absar
9
最好像 Anuja 一样使用 e.target.files[0].name。这只会提供文件名而不是虚假路径... - doekman
96

我已经使用了以下内容：

<script type="application/javascript">
    $('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        $('.custom-file-label').html(fileName);
    });
</script>
4
这让我完成了90%的工作。不过，因为我有多个文件输入，所以需要通过ID进行定位，而不是类名。 - George Harnwell
11
如果你有多个文件输入框，可以使用以下代码：$(e.target).siblings('.custom-file-label').html(fileName);，它可以将文件名显示在相应的标签上。请注意，此代码不会改变原始功能或含义。 - Federico G
2
你应该使用.text(fileName)而不是.html(fileName)。 - jor
如果您只有一个文件输入，那么这将是很好的。多个文件输入将用相同的文件名（您选择的最后一个文件）替换所有标签。 - Ranch Camal
另一种使用多个输入进行操作的方法：$(this).parent().find('.custom-file-label').html(fileName); - Chad Reitsma
显示剩余2条评论
48

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) {
        if (e.target.files.length) {
            $(this).next('.custom-file-label').html(e.target.files[0].name);
        }
    });

</script>
2
如果有人取消文件上传，e.target.files 将为空并抛出错误 Uncaught TypeError: Cannot read property 'name' of undefined。如果您检查 e.target.files 的长度，就可以避免控制台错误。虽然从功能上来说没有什么问题。 - phyatt
@phyatt 不，它在Edge、Chrome和FireFox中都不会。 - VDWWD
1
第二个更简单的代码片段示例。第一个示例很好。 - phyatt
2
@phyatt，已经找到并修复了。感谢您指出这个问题！ - VDWWD
还要确保将 "overflow: hidden; white-space: nowrap;" 添加到 .custom-file-label 中，否则选择的文件会溢出到页面下方。 - Jeff Widmer
显示剩余2条评论
35
$(document).on('change', '.custom-file-input', function (event) {
    $(this).next('.custom-file-label').html(event.target.files[0].name);
})

最佳方案。适用于动态创建的输入，并使用实际文件名。

10

这适用于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>
6
4
1
这个很好用：https://www.codeply.com/go/uGJOpHUd8L/file-input - Carol Skelly
3
当你有多个文件时，一个想法是仅显示第一个文件和隐藏文件名的数量。
$('.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);
});
2
这段代码对我有效：

这段代码对我有效：

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接