Angular中如何设置文件选择的非change事件监听器？解决重复选同文件不触发问题

问题核心原因：input[type=file]的change事件只有当选中的文件路径发生变化时才会触发，重复选择同一文件时，输入框的value值没有改变，所以事件不会被触发。

针对你的代码，最简单的解决方式是在处理完文件逻辑后，手动清空输入框的value，让输入框回到初始状态，这样下次选择同一文件时，value从空变为文件路径，就能正常触发change事件了。

修改后的代码示例 #

你的HTML代码保持不变：

<input #inputFile type="file" name="uploadFile" (change)="fileInputChange($event,docu.id,inputFile)" />

在对应的TypeScript处理函数中添加清空逻辑：

fileInputChange(event: Event, docId: any, inputFile: HTMLInputElement) {
  // 1. 获取选中的文件
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  
  if (file) {
    // 2. 执行你的弹窗验证、文件上传等业务逻辑
    // 示例：弹窗确认是否上传该文件
    if (confirm(`确认上传文件：${file.name}？`)) {
      // 这里写入实际上传逻辑
      console.log(`开始上传文件：${file.name}`);
    }
  }

  // 3. 清空输入框value，重置状态
  inputFile.value = '';
}

注意事项 #

• 清空value的操作要放在文件逻辑处理完成之后，因为我们已经提前获取了文件对象，清空不会影响已读取的文件数据。
• 这种方式逻辑简单且兼容性好，适用于包括Angular在内的大多数前端场景。

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