Angular中如何在点击事件触发change事件并检测文件上传取消

我需要检测文件上传时用户点击取消按钮的操作，原本尝试通过监听click和change事件来实现：触发change则执行上传，未触发则判定为取消并抛出错误。当前使用的模板代码如下：

<input type="file" formControlName="receipt" (click)="fileDeetect($event)" (change)="uploadReceipt($any($event.target).files)" 
       class="positionabsolute" style="opacity: 0; width: 0; height: 0" id="validatedCustomFile" required />

尝试过Angular表单的markAsTouched()方法，但它仅在文件上传后生效，无法满足检测取消操作的需求。

核心思路 #

利用文件选择弹窗的同步阻塞特性：当用户点击文件输入框后，浏览器会暂停JS执行，直到用户关闭文件选择弹窗（无论选择文件还是取消）。通过在click事件中设置定时器，在change事件中清除定时器，即可判断用户是否取消了选择：

• 若用户选择文件：change事件触发，清除定时器，执行上传逻辑
• 若用户取消选择：change事件不触发，定时器到期执行，判定为取消操作

具体实现 #

组件代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
  uploadForm: FormGroup;
  private fileSelectTimeout: any;

  constructor(private fb: FormBuilder) {
    this.uploadForm = this.fb.group({
      receipt: ['', []]
    });
  }

  ngOnInit(): void { }

  get receiptControl(): FormControl {
    return this.uploadForm.get('receipt') as FormControl;
  }

  fileDetect(): void {
    // 设置100ms延迟，确保文件选择弹窗关闭后再执行判断
    this.fileSelectTimeout = setTimeout(() => {
      // 标记控件为已触碰并设置取消错误
      this.receiptControl.markAsTouched();
      this.receiptControl.setErrors({ fileCancelled: true });
      // 执行取消后的逻辑，比如抛出错误或提示用户
      console.error('用户取消了文件上传');
    }, 100);
  }

  uploadReceipt(files: FileList | null): void {
    // 清除定时器，说明用户选择了文件
    clearTimeout(this.fileSelectTimeout);
    
    if (files && files.length > 0) {
      // 清除错误状态，执行上传逻辑
      this.receiptControl.setErrors(null);
      console.log('开始上传文件:', files[0]);
      // 这里替换为你的实际上传代码
    }
  }
}

模板代码（修正方法名拼写）

<input type="file" formControlName="receipt" (click)="fileDetect()" (change)="uploadReceipt($any($event.target).files)" 
       class="positionabsolute" style="opacity: 0; width: 0; height: 0" id="validatedCustomFile" required />

关键说明 #

1. 定时器延迟设置：100ms是一个安全的延迟值，足够覆盖文件选择弹窗关闭的时间，避免误判
2. 表单状态处理：在取消时手动调用markAsTouched()并设置自定义错误fileCancelled，可以结合表单验证提示用户
3. 错误清除：选择文件后要及时清除错误状态，避免影响后续表单提交

内容的提问来源于stack exchange，提问作者Susil Kumar Behera