Angular2 Dateieingabe onchange

Question

Ich habe Eingabedatei (ohne submit - typische Eingabedatei). Ich möchte eine Funktion aufrufen, wenn Sie die Datei auswählen.

Beispiel: Ich klicke auf "Datei wählen" -> Datei wählen -> jetzt erkennt System Änderungen und ruft eine Funktion auf, die alle diese Dateiinformationen ausgibt (zum Beispiel Bildname).

Ich kann nicht ngModel auf Eingabedatei verwenden, oder? Wie geht das?

Answer 1

Verwenden Sie die in Ihrer Vorlage folgendermaßen vor:

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

dann Ihre Komponente fileChangeEvent() als

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]); 
    } 
} 

alle Ihre Datei bezogenen Informationen wird die Konsole ....

Answer 2

Doppel H Funktion didn‘ t arbeite für mich, bis ich onclick = "this.value = null" hinzugefügt habe, wie hier gefunden: https://stackoverflow.com/a/42357862/634650

Answer 3

Hier sind meine Änderungen an der Antwort von Double H, dass man sich nicht auf jQuery verlässt und das Ausblenden des Webpacks auf e.target.result stoppt.

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

Typoskript-Code

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]); 
} 

}