javascript - 如何让输入类型文件在打开文件选择器之前等待http请求的响应

Question

我的页面中有一个文件选择器。

<input type='file' id='xxx'>

单击此输入后，我必须通过 HTTP 请求验证其他一些字段。现在我想要的是我的文件选择器应该等到我收到 HTTP 请求的响应。有什么办法可以实现这个目标吗？

单击时，我正在调用一些方法来验证所有内容，但在完成方法执行之前，会出现文件选择器。

我尝试了异步/同步方法调用，但没有成功。

我使用的是 Angular 6。

Answer 1

我认为你需要这样的想法。UPDT:抱歉，已修复示例以正常工作

@Directive({
  selector: '[validateClick]'
})
export class ValidateClickDirective {
  private _isValid: boolean = false;

  constructor(
    private _elementRef: ElementRef<HTMLElement>
  ) { }

  @HostListener('click', ['$event'])
  public onClick(event: MouseEvent): void {
    if (!this._isValid) {
      event.preventDefault();
      of(true) // your request to the server
        .pipe(delay(1000))
        .subscribe((isValid: boolean) => {
          this._isValid = isValid
          if (isValid) {
            this._elementRef.nativeElement.click();
          }
        })
    } else {
      this._isValid = false;
    }
  }

}

并使用它:

<input type="file" validateClick>