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