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

Question

<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

这是一个相对古老的问题，但我有一个简单而流畅的解决方案，供刚才来这里的人使用。

向HTML元素添加一个ID（在我的示例中是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();
}

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