Angular2 Datei input onchange

Habe ich input-Datei (ohne submit - typicall input-Datei). Ich würde gerne eine Funktion, wenn entschieden Datei.

Beispiel:
Klicke ich auf "Wählen Sie Datei" -> wählen Sie "Datei" - > system erkennt nun ändern und rufen Sie einige Funktion, die druckt alle diese Datei-Informationen (zum Beispiel Bild-name).

Kann ich nicht verwenden ngModel auf input-Datei, richtig? Wie macht man das?

InformationsquelleAutor elzoy | 2016-07-20
  1. 42

    Verwenden Sie den folgenden in Ihre Vorlage ein:

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

    Dann die 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 verbundene info-Konsole....

    • Vielen Dank, es funktioniert. Haben Sie eine Idee wie könnte ich in der Lage sein, die Darstellung ausgewählter Foto? Es gibt keinen Weg in fileInput.Ziel.Dateien Antwort.
    • siehe meine aktualisierte Antwort
    • bitte beziehen Sie sich ...jsfiddle.net/eD2Ez
    • Und was ist, wenn ich auf senden/hochladen der gleichen Datei zwei mal? das change-Ereignis nicht ausgelöst, wenn ich die gleiche Datei zweimal. Gibt es irgendeine Art von submit-Ereignis, die ich verwenden kann?
    • Gibt es eine Art, die wir hier nutzen haben können, anstelle von "any"? Ich habe keine Behinderten in meinem Projekt
    • siehe Chris Antwort unten.

    InformationsquelleAutor Double H
  2. 5

    Hier meine änderungen Doppel-H s Antwort sich nicht auf jQuery und stoppen Sie die webpack erroring auf e.Ziel.Ergebnis.

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

    }

    InformationsquelleAutor Kamalpreet
  3. 4

    Doppel-H-s-Funktion hat bei mir nicht funktioniert, bis ich Hinzugefügt onclick="this.Wert = null" als das hier gefunden: https://stackoverflow.com/a/42357862/634650

    InformationsquelleAutor Chris
Schreibe einen Kommentar