Bootstrap 4 自定义文件上传不在标签中显示文件名

Question

我正在尝试使用 Bootstrap 4 自定义文件创建文件上传。在此过程中，文件上传后文件名不会显示在标签中。我尝试使用 Javascript 来更新标签中的文件名。但是，这没有用。下面是代码。请帮我解决这个问题。

<div class="container-fluid">
    <form enctype="multipart/form-data">
        <div class="card">
                    <div class="card-header">
                        BERICHT DATEI IMPORTIEREN
                    </div>
                    <div class="card-body">       
                            <div class="form-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="blkUploadReport" name="blkUploadReport">
                                        <label class="custom-file-label" for="blkUploadReport">Choose the File</label>
                                    </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-6">
                                    <button class="btn btn-success btn-raised btn-sm" id="saveEdit" >
                                    IMPORTIEREN <span class="glyphicon glyphicon-floppy-disk"></span> 
                                    </button>                   
                                </div>  
                            </div>
                    </div>
        </div>
    </form>
</div>

$('.custom-file-input').on('change', function(){
    console.log("I am inside upload event");
    files = $(this)[0].files; 
    name = ''; 
    for(var i = 0; i < files.length; i++)
    {
        name += '\"' + files[i].name + '\"' + (i != files.length-1 ? ", " : ""); 
    } 
    $(".custom-file-label").html(name);
});

Answer 1

如果有多个文件，我建议在javascript中使用push创建一个数组，然后显示它们。

var name = []
for (var i = 0; i < files.length; i++) {
   name.push(files[i].name) // Anything else you want to be displayed
}
document.getElementbyClassName('custom-file-label').innerHTML = name

Answer 2

jQuery 选择器未选择输入元素。请改用文件输入的 id 属性。

$('#blkUploadReport').on('change', function(){
    console.log("I am inside upload event");
    files = $(this)[0].files; 
    name = ''; 
    for(var i = 0; i < files.length; i++)
    {
        name += '\"' + files[i].name + '\"' + (i != files.length-1 ? ", " : ""); 
    } 
    $(".custom-file-label").html(name);
})

演示：https://codeply.com/p/bJmnTUiqhS

另见：

Answer 3

$(".custom-file-input").on("更改", function() {

var fileName = $(this).val().split("\").pop();

$(this).siblings(".custom-file-label").addClass("selected").html(fileName);

});

Bootstrap 4 自定义文件上传不在标签中显示文件名

Bootstrap 4 Custom file upload is not displaying the file name in label

javascript

jquery

input-field

bootstrap-4