Html 如何在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>

---

如何使其轻松打开文件对话框

使用文件类型创建输入，并添加css以将其显示为图像

<div class="boxed">
  <div class="input-group">
      <input id="spFile" class="form-control" name="spFile">
    <input type="file" class="filepicker">
  </div>
</div>

---

还添加一个事件发射器来捕获更改事件，如（change）=“onChange（$event）”。

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

在

HTML元素中添加一个ID（在我的示例中是

FileSelectInputDialog

）

使用

ViewChild

在组件中为其创建句柄：

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

@ViewChild('FileSelectInputDialog') FileSelectInputDialog: ElementRef;

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

然后，您可以将

（单击）=“OpenAddFilesDialog（）”

指令添加到图像或任何其他HTML元素，例如，添加到常规按钮：

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

添加框

你的意思是这样的吗？您能描述一下这个事件发射器部分吗？我是编程新手。您可以在此标记中添加事件发射器，以选择实际的文件用户，并在需要时发送到modal（详细信息请参见），尽管它打开了“文件资源管理器”对话框，但不显示附加项。在“文件更改”事件中，您可以捕获文件名并将其分配给变量，并使用角度模板表达式在另一个div中显示它

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