web-dev-qa-db-ja.com

入力ファイルのクリックイベントをangular 2？

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

<button>Upload file</button>

Angular 2？のボタンのクリックイベントから入力タイプ=ファイルのクリックイベントをトリガーする方法

filefile-uploadangular
30
amol

次のようにテンプレート参照変数を活用できます。

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

対応するplunkrはこちらです https://plnkr.co/edit/JB4HY0oxEUgXXIht2wAv?p=preview

82
yurzui

入力ファイルフィールドの変数を#fileとして宣言し、ファイルの変更のみがupload関数を呼び出して、アップロードされたファイルを関数に渡すようにすることもできます。

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

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

In 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();
}

それは私の仕事です。

5
maSC0d3R

In Angular 4、

HTML：

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

TypeScript：

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に設定します。これにより、同じファイルを2回選択できます。

3
Mani deep