本文介绍了在使用 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 事件：
在原版的基础上做了一下修正评论没有提交正文的问题特价商品的调用连接问题去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正主题添加问题商家注册页导航连接问题销售排行不能显示更多问题热点商品不能显示更多问题增加了服务器探测 增加了空间使用查看 增加了在线文件编辑增加了后台管理里两处全选功能更新说明：后台的部分功能已经改过前台
$(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。
动态添加文件上传控件的示例代码
以下是一个完整的示例，展示了如何动态添加文件上传控件，并确保每个控件都能正确显示文件名：
Bootstrap 4 文件上传控件示例 动态添加文件上传控件
代码解释：
- 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 事件。
注意事项
- 确保引入了 jQuery 和 Bootstrap 4 的 CSS 和 JavaScript 文件。
- id 为 image_box 的元素应该是静态存在的父元素，用于绑定事件监听器。
- 动态添加的 HTML 代码应该符合 Bootstrap 4 的规范，包括 custom-file 类和 label 元素。
- 如果需要移除动态添加的控件，需要同时移除其对应的事件监听器。
总结
通过使用 jQuery 的 on() 方法进行事件委托，我们可以轻松地处理动态添加的 Bootstrap 4 文件上传控件的事件，并确保每个控件都能正确显示所选文件的文件名。 这种方法不仅适用于文件上传控件，还可以应用于其他需要动态添加元素的场景。
