html - 单击 Angular 6 中的图像时如何打开文件对话框

Question

我是 Angular 6 的新手。我知道这可能很愚蠢，但我没有得到任何解决方案。单击文本字段中的浏览图像时，我想打开文件对话框。这是我试过的。

<div class="boxed">
  <div class="input-group">
      <input id="spFile" class="form-control" name="spFile">
    <img src="../../../../../assets/images/maps/Browse.png" type= "file" width="40" height="40" style=" position: absolute; top: 1px; right: 1px" aria-hidden="true"/>
  </div>
</div>

如何让它轻松打开文件对话框？

Answer 1

这是一个比较老的问题，但是对于刚刚来这里的人，我有一个简单而流畅的解决方案。

为您的 <input> 添加一个 ID HTML 元素(在我的示例中为 FileSelectInputDialog)。

<input #FileSelectInputDialog type="file" multiple/>

在您的组件中使用 ViewChild 创建一个句柄:

import { ViewChild } from '@angular/core';

@ViewChild('FileSelectInputDialog') FileSelectInputDialog: ElementRef;

public OpenAddFilesDialog() {
    const e: HTMLElement = this.FileSelectInputDialog.nativeElement;
    e.click();
}

然后你可以添加 (click)="OpenAddFilesDialog()"指令到您的图像或任何其他 HTML 元素，例如，到一个常规按钮:

<button mat-icon-button class="BtnAddFiles" (click)="OpenAddFilesDialog()">
    <mat-icon>add_box</mat-icon>
</button>