web-dev-qa-db-fra.com

comment déclencher l'événement click du fichier d'entrée à partir du clic du bouton dans angular 2?

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

<button>Upload file</button>

Comment déclencher un événement clic de type d'entrée = fichier à partir de l'événement clic du bouton dans Angular 2?

filefile-uploadangular
30
amol

Vous pouvez exploiter la variable de référence du modèle comme suit:

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

Le plunkr correspondant est ici https://plnkr.co/edit/JB4HY0oxEUgXXIht2wAv?p=preview

82
yurzui

Vous pourriez avoir déclarer la variable pour le champ du fichier d’entrée sous la forme #file & alors seul le changement de fichier appelle la fonction upload pour transmettre le fichier téléchargé à la fonction.

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

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

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

C'est un travail pour moi.

5
maSC0d3R

Dans Angular 4,

HTML:

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

Manuscrit:

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
}

En considérant le problème futur de la sélection du même fichier qui ne fonctionne pas, Dans l’événement clic sur la balise d’entrée, nous définissons la valeur sur null, ce qui permet au même fichier de sélectionner une seconde fois.

3
Mani deep