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

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

碧海醫心

发布： 2025-10-11 08:31:01

原创

820人浏览过

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

本文介绍了在使用 Bootstrap 4 的文件上传控件时，如何动态添加新的上传控件，并使每个控件都能正确显示所选文件的文件名。重点讲解了如何使用 jQuery 的 `on()` 方法来处理动态添加元素的事件绑定问题，以及如何正确地更新文件上传控件旁边的标签以显示文件名。

在使用 Bootstrap 4 创建文件上传功能时，我们常常会遇到需要动态添加文件上传控件的情况。然而，动态添加的控件可能无法像初始控件那样自动显示所选文件名。本文将介绍如何解决这个问题，确保每个动态添加的 Bootstrap 4 文件上传控件都能正确显示文件名。

问题分析

Bootstrap 4 使用 custom-file 类来美化文件上传控件，并使用相邻的 label 元素来显示文件名。默认情况下，JavaScript 代码会监听 input[type="file"] 的 change 事件，并在事件触发时更新 label 元素的内容。

当通过 JavaScript 动态添加 input[type="file"] 元素时，直接使用 $('input[type="file"]').change() 绑定事件可能无法生效。这是因为在页面加载时，动态添加的元素尚未存在，因此事件监听器无法绑定到这些元素上。

解决方案：使用 on() 方法进行事件委托

解决这个问题的方法是使用 jQuery 的 on() 方法进行事件委托。 on() 方法允许我们将事件监听器绑定到静态父元素上，并指定一个选择器，以便只有匹配该选择器的子元素触发事件时，监听器才会被执行。

以下代码展示了如何使用 on() 方法来处理动态添加的文件上传控件的 change 事件：

芦笋演示

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

查看详情

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

登录后复制

代码解释：

$(document).ready(function(){ ... });：确保在文档加载完成后执行代码。
$('#image_box').on('change', 'input[type="file"]', function(e) { ... });：将 change 事件监听器绑定到 id 为 image_box 的元素上。当 image_box 元素内的任何 input[type="file"] 元素触发 change 事件时，监听器将被执行。
var fileName = e.target.files[0].name;：获取所选文件的文件名。
$(this).next().html(fileName);：更新当前 input[type="file"] 元素相邻的 label 元素的内容，以显示文件名。 $(this) 指的是触发事件的 input[type="file"] 元素，.next() 选择器选择紧随其后的兄弟元素，也就是用于显示文件名的 label。

动态添加文件上传控件的示例代码

以下是一个完整的示例，展示了如何动态添加文件上传控件，并确保每个控件都能正确显示文件名：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4 文件上传控件示例</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>动态添加文件上传控件</h1>
    <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>
    <div id="new_image_box"></div>
  </div>

  <script>
    var total_image = 1;

    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>  <div class="input-group-append"><button class="btn btn-danger" type="button" onclick=remove_image("' + total_image + '")>Remove Image</button></div></div></div>';
      $('#new_image_box').append(html);
    }

    function remove_image(image_id) {
      $('#add_image_box' + image_id).remove();
    }

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

      $('#new_image_box').on('change', 'input[type="file"]', function(e) {
        var fileName = e.target.files[0].name;
        $(this).next().html(fileName);
      });
    });
  </script>
</body>
</html>

登录后复制

代码解释：

add_more_images() 函数：动态创建新的文件上传控件，并将其添加到 id 为 new_image_box 的元素中。
remove_image() 函数：移除动态添加的文件上传控件。
$(document).ready(function() { ... });：在文档加载完成后执行代码。
$('#image_box').on('change', 'input[type="file"]', function(e) { ... });：处理初始文件上传控件的 change 事件。
$('#new_image_box').on('change', 'input[type="file"]', function(e) { ... });：处理动态添加的文件上传控件的 change 事件。