html - Bootstrap 表格 : Custom file button working but not showing name of uploaded file

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

我创建了一个由两列组成的 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>  

非常感谢。

最佳答案

我测试你的代码,它的工作

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

关于html - Bootstrap 表格 : Custom file button working but not showing name of uploaded file,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58063314/

相关文章:

html - CSS3框架,创建指定高度的中心内容区域

jquery - 出现 "Object #<NodeList> has no method ' click'"错误?

CSS 文本溢出哦天啊真是一团糟

javascript - 我无法使用 Enter 发送

html - tcpdf (html2pdf) 未正确生成表格边框

javascript - 适合窗口高度的图像

c# - 加密数据时如何保留回车符?

javascript - 防止表单重复提交

css - 修改Rails的custom.scss.css导致报错

html - Bootstrap 列不会在小屏幕上转到下一行