如何从角度2中的按钮单击触发输入文件的单击事件？

Question

<input type="file" accept="image/*">

<button>Upload file</button>

如何从Angular 2中按钮的单击事件触发input type = file的click事件？

Answer 1

您可以使用模板引用变量,如下所示:

<input type="file" accept="image/*" #file>
<button (click)="file.click()">Upload file</button>

相应的plunkr在这里https://plnkr.co/edit/JB4HY0oxEUgXXIht2wAv?p=preview

Answer 2

您可以为输入文件字段声明变量,#file然后只有文件更改执行调用upload函数将上传的文件传递给函数.

<input #file type="file" accept="image/*" (change)="upload(file.files)">

<button #upload (click)="file.click()">Upload file</button>

Answer 3

在Angular 4中

HTML：

<ion-input type="file" formControlName="avatar"></ion-input>
<button type="button" ion-button (click)="selectFile()"></button>

Javascript：

selectFile() {
    let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
    element.click();
}

对我来说有用。

Answer 4

在Angular 4中

HTML：

<input #fileUpload type="file" (click)="fileUpload.value = null"(change)="importFile($event)" style="display:none"
accept="image/*">
<button (click)="fileUpload.click()">  </button>

打字稿：

importFile(event) {

if (event.target.files.length == 0) {
   console.log("No file selected!");
   return
}
  let file: File = event.target.files[0];
  // after here 'file' can be accessed and used for further process
}

考虑到将来选择同一文件不起作用的问题，在输入标签单击事件中，我们将设置为null，这允许同一文件第二次选择。