web-dev-qa-db-fra.com

Changement d'entrée de fichier Angular2

J'ai un fichier d'entrée (sans soumettre - fichier d'entrée typicall). Je voudrais appeler une fonction lorsque vous avez choisi un fichier.

Exemple: je clique sur "Choisir un fichier" -> choisir un fichier -> maintenant le système détecte le changement et appelle une fonction qui imprime toutes ces informations sur le fichier (par exemple le nom de l'image).

Je ne peux pas utiliser ngModel sur le fichier d'entrée, non? Comment faire ça?

fileangularupload
16
elzoy

Utilisez les éléments suivants dans votre modèle:

<div class="modal-body">
   <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
   <img id="preview" src="" alt="Preview">
</div>

Ensuite, votre composant fileChangeEvent() comme

public fileChangeEvent(fileInput: any){
      if (fileInput.target.files && fileInput.target.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e : any) {
            $('#preview').attr('src', e.target.result);
        }

        reader.readAsDataURL(fileInput.target.files[0]);
    }
}

Toutes les informations liées à votre fichier se consoleront ....

45
Double H

Voici mes amendements à la réponse de Double H pour ne pas compter sur jQuery et arrêter les erreurs du webpack sur e.target.result.

<img [src]="imageSrc" alt="" />
<input type="file" capture="camera" accept="image/*" (change)="displayPhoto($event)">

Code TypeScript

displayPhoto(fileInput) {
  if (fileInput.target.files && fileInput.target.files[0]) {
  const reader = new FileReader();

  reader.onload = ((e) => {
    this.imageSrc = e.target['result'];
  });

  reader.readAsDataURL(fileInput.target.files[0]);
}

}

5
Kamalpreet

La fonction de Double H n'a pas fonctionné pour moi jusqu'à ce que j'ajoute onclick = "this.value = null" comme on le trouve ici: https://stackoverflow.com/a/42357862/63465

4
Chris