我已经创建了一个由两列组成的引导表单(使用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/

10-09 17:59
查看更多