我已经创建了一个由两列组成的引导表单(使用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>
多谢提前。
最佳答案
如果我没有弄错,如果你想自定义“没有文件”的消息,你需要在文件上传后使用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
关于html - Bootstrap表单:“自定义文件”按钮有效,但未显示上传文件的名称,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58063314/