Bootstrap 4：动态添加的文件输入框显示文件名

本文旨在解决 Bootstrap 4 中动态添加的 input type="file" 文件选择框，在选择文件后无法正确显示文件名的问题。通过使用事件委托，我们可以确保即使是动态生成的元素也能正确响应 change 事件，从而实现文件名显示功能。

在使用 Bootstrap 4 创建文件上传表单时，经常需要动态添加文件输入框。然而，直接绑定 change 事件到动态生成的 input type="file" 元素上，通常无法正常工作。这是因为在页面加载时，这些元素还不存在，所以事件监听器无法绑定到它们。解决这个问题的方法是使用事件委托。

事件委托的原理

事件委托利用了事件冒泡的特性。当一个事件发生在一个元素上时，它会沿着 DOM 树向上冒泡，直到根元素。我们可以将事件监听器绑定到一个静态存在的父元素上，然后通过判断事件目标（event.target）来确定实际触发事件的元素。

实现步骤

1. HTML 结构: 确保你的 HTML 结构包含一个静态存在的父元素，用于包裹动态添加的 input type="file" 元素。例如，可以使用一个 div 元素，并为其设置一个唯一的 ID。

   

   零沫AI工具导航

   零沫AI工具导航-AI导航新标杆,探索全球实用AI工具

   下载

   <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. JavaScript 代码: 使用 jQuery 的 on() 方法，将 change 事件监听器绑定到静态父元素上。在事件处理函数中，使用 event.target 获取触发事件的 input type="file" 元素，并更新其相邻的 label 元素的内容。

   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" 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); // Use append instead of after
   }
   
   $(document).ready(function() {
       $('#image_box').on('change', 'input[type="file"]', function(e) {
           var fileName = e.target.files[0].name;
           $(this).next().html(fileName); // Update the label with the file name
       });
   });

   代码解释:

   • $('#image_box').on('change', 'input[type="file"]', function(e) { ... });：这行代码将 change 事件监听器绑定到 ID 为 image_box 的元素上。'input[type="file"]' 是一个选择器，用于指定只有当 input type="file" 元素触发 change 事件时，才会执行事件处理函数。
   • var fileName = e.target.files[0].name;：这行代码获取选择的文件名。e.target 指向触发事件的 input type="file" 元素。e.target.files 是一个 FileList 对象，包含了所有选择的文件。e.target.files[0] 表示选择的第一个文件。name 属性包含了文件名。
   • $(this).next().html(fileName);：这行代码更新与 input type="file" 元素相邻的 label 元素的内容，显示文件名。$(this) 指向触发事件的 input type="file" 元素。next() 方法选择紧跟在 input type="file" 元素后面的兄弟元素，也就是 label 元素。html(fileName) 方法将 label 元素的内容设置为文件名。
   • jQuery('#image_box').append(html);：务必使用append，将动态生成的元素添加到#image_box的内部。

注意事项

• 确保你的 Bootstrap 4 引入正确。
• add_more_images() 函数中的 HTML 字符串需要正确拼接，特别是引号的使用。
• 确保事件委托绑定的父元素是静态存在的，即在页面加载时就存在。

总结

通过使用事件委托，我们可以轻松地解决 Bootstrap 4 中动态添加的 input type="file" 文件选择框无法正确显示文件名的问题。这种方法不仅适用于文件选择框，也适用于其他需要动态添加元素的场景。理解事件委托的原理，可以帮助你编写更健壮、更灵活的 JavaScript 代码。