本文旨在解决 Bootstrap 4 中动态添加的 input type=”file” 文件选择框，在选择文件后无法正确显示文件名的问题。通过使用事件委托，我们可以确保即使是动态生成的元素也能正确响应 change 事件，从而实现文件名显示功能。
在使用 Bootstrap 4 创建文件上传表单时，经常需要动态添加文件输入框。然而，直接绑定 change 事件到动态生成的 input type=”file” 元素上，通常无法正常工作。这是因为在页面加载时，这些元素还不存在，所以事件监听器无法绑定到它们。解决这个问题的方法是使用事件委托。
事件委托的原理
事件委托利用了事件冒泡的特性。当一个事件发生在一个元素上时，它会沿着 DOM 树向上冒泡，直到根元素。我们可以将事件监听器绑定到一个静态存在的父元素上，然后通过判断事件目标（event.target）来确定实际触发事件的元素。
实现步骤
HTML 结构: 确保你的 HTML 结构包含一个静态存在的父元素，用于包裹动态添加的 input type=”file” 元素。例如，可以使用一个 div 元素，并为其设置一个唯一的 ID。
JavaScript 代码: 使用 jQuery 的 on() 方法，将 change 事件监听器绑定到静态父元素上。在事件处理函数中，使用 event.target 获取触发事件的 input type=”file” 元素，并更新其相邻的 label 元素的内容。
var total_image = 1;function add_more_images() { total_image++; var html = ' '; 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 代码。
以上就是Bootstrap 4：动态添加的文件输入框显示文件名的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1323240.html
微信扫一扫 
支付宝扫一扫 
