引导表单：自定义文件按钮工作但不显示上传文件的名称答案

【问题标题】：Bootstrap form: Custom file button working but not showing name of uploaded file引导表单：自定义文件按钮工作但不显示上传文件的名称
【发布时间】：2020-01-23 13:48:29
【问题描述】：

我创建了一个 由两列组成的 Bootstrap 表单（使用 Bootstrap 4.3）。在这个表单中，我使用了一个自定义文件上传按钮。

该按钮允许我选择文件并按预期上传它们。
我唯一的问题是它在上传后不显示上传文件的名称（它应该替换“未选择文件”，例如显示“test.xlsx”）。

有人能告诉我如何让它工作吗？我需要为此添加任何 jQuery 等吗？

我的 HTML：

<div class="form-group row">
    <label for="attachment" class="col-md-3 col-lg-2 col-form-label">
        <span id="lblAttachment">Attachment</span>:
    </label>
    <div class="col-md-9 col-lg-10 input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="lblFile">File</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="attachment" name="attachment" aria-describedby="lblFile"/>
            <label for="attachment" class="custom-file-label">No file chosen</label>
        </div>
    </div>
</div>

非常感谢。

【问题讨论】：

标签： html forms twitter-bootstrap file-upload bootstrap-4

【解决方案1】：

我测试你的代码，它的工作原理

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="/action_page.php">
    <div class="form-group row">
    <label for="attachment" class="col-md-3 col-lg-2 col-form-label">
        <span id="lblAttachment">Attachment</span>:
    </label>
    <div class="col-md-9 col-lg-10 input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="lblFile">File</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="attachment" name="attachment" aria-describedby="lblFile"/>
            <label for="attachment" class="custom-file-label">No file chosen</label>
        </div>
    </div>
</div>  
  </form>
</div>

</body>
</html>

欲了解更多信息，请查看此链接：https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h

【讨论】：

谢谢。我正在使用 Bootstrap 4.3.1，并且头部的引用略有不同：

【解决方案2】：

如果我没记错的话，如果你想自定义“无文件”消息，你需要在文件上传后使用 JS、Angular 等进行更改，因为该文本不知道何时更改。

这样的事情可以解决问题：

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

这里有一些链接可以帮助你：

https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h

【讨论】：

非常感谢。这就说得通了。我将您的代码添加到此页面的文档就绪功能中，但它仍然没有向我显示上传的文件。该文件肯定在那里（隐藏在某个地方），因为我在处理表单时可以看到它。所以似乎有些东西阻止了文本更新。还有其他想法吗？
将此和平添加到您的 css .custom-file-label.selected::after { content: "" !important; }
更新：这个函数确实起到了作用。我只需将我的库引用从页脚移动到头部即可使其正常工作。再次感谢！