Angular：单击按钮时打开文件对话框答案

【问题标题】：Angular: Open file dialog upon button clickAngular：单击按钮时打开文件对话框
【发布时间】：2019-10-12 07:01:46
【问题描述】：

我正在使用 Angular 8。单击按钮后，我想打开一个文件对话框，选择一个文件，然后调用一个处理该文件的事件。

谢谢你，兹维卡

我在 HTML 中尝试了以下代码。但我不想在 HTML 中显示任何内容。

HTML

<p-fileUpload name="myfile[]" customUpload="true" auto="true" (uploadHandler)="onOpenFile($event)" accept="application/pdf"></p-fileUpload>

public onOpenFile (event) { }

【问题讨论】：

标签： file-upload primeng

【解决方案1】：

你可以用普通的输入标签来实现，你可以把它隐藏起来，但至少你需要一个元素来触发点击事件。检查stackblitz

【讨论】：

有没有办法多次选择同一个文件？至于现在handle(e) 仅当我们从已选择的文件中选择不同的文件时才会触发
您需要尝试其他方法，因为更改事件已绑定在文件输入标签上。所以只有当它发生变化时才会触发。

【解决方案2】：

仅在对某人有帮助时发布

就我而言，我想将同一个文件上传两次。除此之外，根据this example，一切正常。

要两次上传同一文件，您需要在选择文件后清除input 的value。如下例所示

Stackblitz example

【讨论】：

非常感谢！

【解决方案3】：

除了@Abhinav Kumar 关于 Primeng 的回答：

  <span pButton label="Import..." icon="pi pi-folder-open" (click)="fileInput.click()">
    <input #fileInput type="file" hidden (change)="doFileInput($event)">
  </span>

【讨论】：