如何捕获HTML input type="file" multiple文件选择完成后的触发事件

嘿，你可以直接监听这个input[type="file"]元素的change事件！当用户在文件选择对话框里选完文件并关闭对话框时，这个事件就会立刻触发，完全符合你想要“完成选择后立即执行代码”的需求。

为什么选change事件？ #

对于文件选择框来说，change事件的触发逻辑很贴合场景：只有当用户选中的文件列表和之前的状态不一样时（比如选了新文件、修改了已选文件），事件才会触发。如果用户打开对话框后没选任何文件就直接关闭，事件不会触发——这其实很合理，因为没有发生实际的选择变更，没必要执行后续代码。

结合你的HTML代码的示例 #

你的文件选择框ID是section_photos，可以这样写事件监听：

// 获取文件输入元素
const fileInput = document.getElementById('section_photos');

// 添加change事件监听
fileInput.addEventListener('change', function() {
  // 获取所有选中的文件，返回FileList对象
  const selectedFiles = this.files;
  
  if (selectedFiles.length > 0) {
    console.log('已选中的文件：', selectedFiles);
    // 这里就可以写你的上传逻辑啦，比如遍历文件逐个上传
    for (const file of selectedFiles) {
      console.log('准备上传文件：', file.name);
      // 执行上传操作...
    }
  }
});

小技巧：解决重复选相同文件不触发事件的问题 #

有些浏览器里，如果用户重复选择了完全相同的文件，change事件可能不会触发。解决这个问题很简单，在事件处理完成后重置输入框的value为空字符串即可：

fileInput.addEventListener('change', function() {
  // 处理文件逻辑...
  
  // 重置value，确保下次选相同文件也能触发事件
  this.value = '';
});

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