Bootstrap 4：动态添加文件上传控件并显示文件名-php教程-PHP中文网

Bootstrap 4：动态添加文件上传控件并显示文件名

DDD

发布： 2025-10-11 09:55:03

原创

252人浏览过

bootstrap 4：动态添加文件上传控件并显示文件名

本文档旨在解决在使用 Bootstrap 4 框架时，动态添加文件上传控件后，无法正确显示所选文件名的问题。我们将提供详细的代码示例和解释，帮助开发者轻松实现此功能。

在 Bootstrap 4 中，custom-file 类用于美化文件上传控件。然而，当使用 JavaScript 动态添加文件上传控件时，原有的事件监听器可能无法正确绑定到新添加的元素上，导致无法显示文件名。本文将介绍如何正确地处理动态添加的文件上传控件，并实现文件名显示功能。

1. 问题分析

问题的核心在于事件委托。直接为 input[type="file"] 绑定 change 事件，只能影响页面加载时已经存在的元素。对于动态添加的元素，需要使用事件委托，将事件监听器绑定到一个静态父元素上，然后通过事件冒泡来触发。

2. 解决方案

以下是解决此问题的步骤：

2.1 修改 HTML 结构（PHP 文件）

保持原有的 HTML 结构，重点在于给包含初始文件上传控件的容器添加一个 ID，方便后续进行事件委托。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<div class="form-group">
    <label>Image</label>
    <div class="input-group form-group" id="image_box">
        <div class="custom-file">
            <input type="file" name="image[]" accept="image/*" class="custom-file-input" id="exampleInputFile" required>
            <label class="custom-file-label" for="exampleInputFile">
                Choose Image...
            </label>
        </div>  
        <div class="input-group-append">
            <button class="btn btn-primary" type="button" onclick="add_more_images()">Add Another Image</button>
        </div>
    </div>
</div>

登录后复制

2.2 修改 JavaScript 代码

修改 add_more_images() 函数，使用 append() 方法将新的文件上传控件添加到 image_box 容器中。同时，使用事件委托来处理 change 事件。

var total_image = 1;

//add more images for products
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" required><label class="custom-file-label" for="exampleInputFile">Choose Image...</label></div>  <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').append(html);
}

$(document).ready(function() {
  $('#image_box').on('change', 'input[type="file"]', function(e) {
    var fileName = e.target.files[0].name;
    // change name of actual input that was uploaded
    $(this).next().html(fileName);
  });
});

登录后复制

代码解释:

jQuery('#image_box').append(html);: 使用 append() 方法将新的 HTML 代码添加到 image_box 容器的末尾。
$('#image_box').on('change', 'input[type="file"]', function(e) { ... });: 这是事件委托的关键。
- $('#image_box'): 选择静态存在的父元素（即包含初始文件上传控件的容器）。
- .on('change', 'input[type="file"]', ...): 将 change 事件绑定到父元素上，并指定只有当事件发生在 input[type="file"] 元素上时才触发回调函数。
- $(this).next().html(fileName);: this 指向触发事件的 input[type="file"] 元素，next() 选择紧随其后的 zuojiankuohaophpcnlabel> 元素，然后将文件名设置为 <label> 的 HTML 内容。