如何从多个动态生成的file input控件中获取文件？

嗨，我来帮你梳理下这个问题～

你提到是动态生成多个file input控件，原代码的问题在于：当你在$(document).ready()里直接给$('input:file')绑定change事件时，这个绑定只会作用于页面初始化时已经存在的file input元素。之后通过JS动态生成的新input，并不会自动带上这个事件监听，因为事件是绑定在初始的元素集合上的，新元素不在这个集合里。

这里给你两种靠谱的解决方法：

方法一：使用事件委托（推荐） #

事件委托是把事件绑定到一个静态存在的父元素（比如document，或者更接近的容器元素）上，通过指定选择器来匹配触发事件的子元素。这样不管是初始的还是后来动态生成的file input，触发change事件时都会被监听到。

修改后的JS代码：

$(document).ready(function(){
  // 把事件委托到document上，监听所有input:file的change事件
  $(document).on('change', 'input:file', function () {
    // 遍历当前选中的文件
    for (var i = 0; i < this.files.length; i++) {
      alert(this.files[i].name);
    }
  });
});

小贴士：如果你的file input都放在某个固定容器里（比如<div id="file-container"></div>），把document换成这个容器的选择器（$('#file-container')）会更高效，因为事件冒泡的层级更少。

方法二：动态生成元素时直接绑定事件 #

如果你是通过JS代码动态创建file input的，可以在创建元素的同时给它绑定change事件：

示例代码（假设你有一个添加按钮来生成input）：

$(document).ready(function(){
  // 点击按钮添加新的file input
  $('#add-file-btn').click(function(){
    // 生成新的input元素
    var inputId = 'file' + ($('input:file').length + 1);
    var newFileInput = $('<input type="file" id="' + inputId + '" />');
    
    // 给新元素绑定change事件
    newFileInput.on('change', function () {
      for (var i = 0; i < this.files.length; i++) {
        alert(this.files[i].name);
      }
    });
    
    // 把新元素添加到页面
    $('#file-container').append(newFileInput);
  });
});

两种方法里，事件委托更简洁易维护，不用每次生成元素都重复写事件绑定的代码，更适合动态元素较多的场景。

内容的提问来源于stack exchange，提问作者comfreakph