本文介绍了在使用 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。
动态添加文件上传控件的示例代码
以下是一个完整的示例，展示了如何动态添加文件上传控件，并确保每个控件都能正确显示文件名：
Bootstrap 4 文件上传控件示例 var total_image = 1; function add_more_images() { total_image++; var html = '动态添加文件上传控件
'; $('#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); }); });
代码解释：
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 文件上传控件的事件，并确保每个控件都能正确显示所选文件的文件名。 这种方法不仅适用于文件上传控件，还可以应用于其他需要动态添加元素的场景。
以上就是Bootstrap 4：动态添加的文件上传控件显示文件名的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1323093.html
微信扫一扫 
支付宝扫一扫 
