Angular: 单击按钮打开文件对话框

Question

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

谢谢，兹维卡

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

HTML

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

ts

public onOpenFile (event) { }

Answer 1

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

Answer 2

只有在对某人有帮助时才发帖

就我而言，我想将同一个文件上传两次。根据 this example.

，除此之外一切正常

要上传同一个文件两次，您需要在选择文件后清除 input 的 value。就像下面的例子

Stackblitz example

Answer 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>

Angular: 单击按钮打开文件对话框

Angular: Open file dialog upon button click

file-upload

primeng