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。

   

   佳可商务购物程序 2004

   在原版的基础上做了一下修正评论没有提交正文的问题特价商品的调用连接问题去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正主题添加问题商家注册页导航连接问题销售排行不能显示更多问题热点商品不能显示更多问题增加了服务器探测 增加了空间使用查看 增加了在线文件编辑增加了后台管理里两处全选功能更新说明：后台的部分功能已经改过前台

   下载

   
       Image
       
   
           
   
               
               
                   Choose Image...
               
           
     
           
   
               Add Another Image
           
       
   

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

   var total_image = 1;
   
   function add_more_images() {
       total_image++;
       var html = '
   Image
   Choose Image...
     
   Remove Image
   ';
       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 代码。