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

Posted 2023-03-05

【中文标题】Bootstrap 4自定义文件上传未在标签中显示文件名

【英文标题】：Bootstrap 4 Custom file upload is not displaying the file name in label

【发布时间】：2020-11-10 21:27:16

【问题描述】：

我正在尝试使用 Bootstrap 4 custom-file 创建文件上传。在此过程中，文件上传后，文件名不会显示在标签中。我尝试使用 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);
);

【问题讨论】：

试试.text(name) 而不是.html(name)

【参考方案1】：

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

另见：Bootstrap 4 File Input

【讨论】：

感谢您的回答。但是它在 Codeply 中适用于文件列表。但是当我尝试单个文件时。它不起作用 。在验证表单后，我还有另一个模态外观问题。下面提到的问题链接。在 Codeply 中创建了演示。问题：link 演示：codeply.com/p/N2Obik2L1E

您的 codeply 不适合选择文件名。 files 始终是一个数组。单个文件是这样的：codeply.com/p/URWn89HKjf 我不会在这里讨论其他问题。

【参考方案2】：

如果有多个文件，我建议在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

【参考方案3】：

$(".custom-file-input").on("change", function()

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

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

);