本文介绍了在使用 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 事件：
芦笋演示 一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。
34 查看详情 
$(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。动态添加文件上传控件的示例代码
以下是一个完整的示例，展示了如何动态添加文件上传控件，并确保每个控件都能正确显示文件名：
<!DOCTYPE html><html><head> <title>Bootstrap 4 文件上传控件示例</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></head><body> <div class="container"> <h1>动态添加文件上传控件</h1> <div class="form-group"> <label>Image</label> <div class="input-group form-group" id="image_box"> <div class="custom-file"> <input type="file" name="image[]" accept="image/*" class="custom-file-input" id="exampleInputFile" required> <label class="custom-file-label" for="exampleInputFile">Choose Image...</label> </div> <div class="input-group-append"> <button class="btn btn-primary" type="button" onclick="add_more_images()">Add Another Image</button> </div> </div> </div> <div id="new_image_box"></div> </div> <script> var total_image = 1; function add_more_images() { total_image++; var html = '<div class="form-group" id="add_image_box' + total_image + '"><label>Image</label><div class="input-group form-group" ><div class="custom-file"><input type="file" name="image[]" accept="image/*" class="custom-file-input changeme" id="exampleInputFile' + total_image + '" required><label class="custom-file-label" for="exampleInputFile' + total_image + '">Choose Image...</label></div> <div class="input-group-append"><button class="btn btn-danger" type="button" onclick=remove_image("' + total_image + '")>Remove Image</button></div></div></div>'; $('#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); }); }); </script></body></html>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：动态添加的文件上传控件显示文件名的详细内容，更多请关注php中文网其它相关文章！
