Bootstrap4动态新增input type=file控件无法显示选中文件名怎么解决

问题原因 #

直接绑定change事件的方式仅作用于页面初始加载时已存在的DOM元素，后续通过add_more_images()动态插入的文件上传控件不会被绑定该事件，因此选中文件后无法触发文件名更新逻辑。

修复方案 #

使用jQuery事件委托机制，将事件绑定到页面初始化时就存在的父级元素（可直接用document），即可覆盖所有匹配的子元素，包含后续动态新增的控件：

$(document).on('change', 'input[type="file"]', function(e) {
    const fileName = e.target.files[0].name;
    $(this).next('.custom-file-label').html(fileName);
});

额外优化建议 #

你当前动态生成的控件存在ID重复问题：所有新增的input都使用了固定IDexampleInputFile，对应label的for属性也指向同一个ID，会导致点击后续新增控件的label时，触发第一个文件选择框的唤起逻辑。可以修改add_more_images中生成HTML的逻辑，给动态生成的元素添加唯一ID：

function add_more_images() {
    total_image++;
    var html='<div class="form-group" id="add_image_box'+total_image+'">\
    <label>Image</label>\
    <div class="input-group form-group" >\
        <div class="custom-file">\
            <input type="file" name="image[]" accept="image/*" class="custom-file-input changeme" id="exampleInputFile'+total_image+'" required>\
            <label class="custom-file-label" for="exampleInputFile'+total_image+'">Choose Image...</label>\
        </div>\
        &nbsp;&nbsp;\
        <div class="input-group-append">\
            <button class="btn btn-danger" type="button" onclick=remove_image("'+total_image+'")>Remove Image</button>\
        </div>\
    </div>\
</div>';
    jQuery('#image_box').after(html);
}

内容的提问来源于stack exchange，提问作者CODE IT