本文档旨在解决在使用 Bootstrap 4 框架时，动态添加文件上传控件后，无法正确显示所选文件名的问题。我们将提供详细的代码示例和解释，帮助开发者轻松实现此功能。
在 Bootstrap 4 中，custom-file 类用于美化文件上传控件。然而，当使用 JavaScript 动态添加文件上传控件时，原有的事件监听器可能无法正确绑定到新添加的元素上，导致无法显示文件名。本文将介绍如何正确地处理动态添加的文件上传控件，并实现文件名显示功能。
1. 问题分析
问题的核心在于事件委托。直接为 input[type=”file”] 绑定 change 事件，只能影响页面加载时已经存在的元素。对于动态添加的元素，需要使用事件委托，将事件监听器绑定到一个静态父元素上，然后通过事件冒泡来触发。
2. 解决方案
以下是解决此问题的步骤：
2.1 修改 HTML 结构（PHP 文件）
保持原有的 HTML 结构，重点在于给包含初始文件上传控件的容器添加一个 ID，方便后续进行事件委托。
2.2 修改 JavaScript 代码
修改 add_more_images() 函数，使用 append() 方法将新的文件上传控件添加到 image_box 容器中。同时，使用事件委托来处理 change 事件。
var total_image = 1;//add more images for productsfunction add_more_images() { total_image++; var html = ' '; jQuery('#image_box').append(html);}$(document).ready(function() { $('#image_box').on('change', 'input[type="file"]', function(e) { var fileName = e.target.files[0].name; // change name of actual input that was uploaded $(this).next().html(fileName); });});
代码解释:
jQuery(‘#image_box’).append(html);: 使用 append() 方法将新的 HTML 代码添加到 image_box 容器的末尾。$(‘#image_box’).on(‘change’, ‘input[type=”file”]’, function(e) { … });: 这是事件委托的关键。$(‘#image_box’): 选择静态存在的父元素（即包含初始文件上传控件的容器）。.on(‘change’, ‘input[type=”file”]’, …): 将 change 事件绑定到父元素上，并指定只有当事件发生在 input[type=”file”] 元素上时才触发回调函数。$(this).next().html(fileName);: this 指向触发事件的 input[type=”file”] 元素，next() 选择紧随其后的
3. 注意事项
确保 jQuery 库已经正确引入。在 $(document).ready() 函数中绑定事件，以确保 DOM 元素已经加载完毕。accept=”image/*” 属性限制了只能选择图片文件。可以根据实际需求修改此属性。required 属性表示该文件上传控件为必填项。
4. 总结
通过使用事件委托，我们可以轻松地处理动态添加的文件上传控件，并实现文件名显示功能。这种方法不仅适用于文件上传控件，还可以应用于其他动态添加的表单元素。理解事件委托的原理，可以帮助我们编写更健壮、更易维护的 JavaScript 代码。
以上就是Bootstrap 4：动态添加文件上传控件并显示文件名的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1323169.html
微信扫一扫 
支付宝扫一扫 
