Angular 2 (ändern) für Datei-Upload

Question

Ich benutze die Angular 2 (ändern), um die hochgeladene Datei zu erkennen und die Funktion auszulösen. Aber ich stehe vor dem Problem, wenn ich die gleiche Datei erneut hochladen wollte, da es keine Änderung in der Datei gibt, (Änderung) wird nicht ausgelöst. Bitte schlagen Sie in diesem Fall die Ereignisbindung vor.

<input type="file" name="file" id="fileupload" (change)="onChange($event)"/> 

Gibt es eine Möglichkeit, den Eingabewert des Typs Datei auf leer zurückzusetzen.

Answer 1

Sie können auf die Dateieingabe als ViewChild zugreifen und die Dateien daraus abrufen.

import { Component, ViewChild, ElementRef} '@angular/core'; 
@Component({ 
//... 
template: ` 
    <input #fileInput type='file' (change)="fileChanged($event)"> 
` 
//... 
}) 
export class FileInputComponent { 
    @ViewChild('fileInput') myFileInput: ElementRef; 

    getFileLater() { 
    console.log(this.myFileInput.nativeElement.files[0]); 
    } 

    fileChanged(event) { 
    console.log(event.target.files[0]); 
    } 
} 

.files[] auf dem nativeElement ist immer ein Array, auch wenn es nur eine Datei (oder keine, was das betrifft) ausgewählt ist. Es wird Ihnen Dateiobjekte genau so geben, wie wenn Sie event.target.files von dem (change) Ereignis zugreifen würden, damit Sie mit ihnen tun können, was Sie nach der Tatsache wollen.

Es sollte jedoch erwähnt werden, dass, wenn eine Datei in der Dateieingabe ausgewählt wird und das Änderungsereignis ausgelöst wird, die Datei nicht irgendwo "hochgeladen" wurde. Es übergibt dem Browser nur einen Verweis (mit einigen anderen Metadaten), mit dem der Client arbeiten kann. Das Hochladen der Dateien ist etwas, das Sie separat programmieren müssen.

UPDATE:

Um die Datei-Eingabe zu zwingen, auch das Änderungsereignis ausgelöst, wenn eine Datei auswählen, die zuvor ausgewählt wurde, wird die Datei Eingabe durch Löschen seines Wertes zurückgesetzt werden, wenn die Schaltfläche Durchsuchen ist geklickt. Da Sie bereits jQuery verwenden, können Sie das folgendermaßen tun: $('#fileupload').val("");.

See my forked Plunker für ein funktionierendes Beispiel.