Angular 2 (zmiana) do przesłania pliku

Question

Używam Angular 2 (zmiana), aby wykryć załadowany plik i uruchomić funkcję. Ale napotykam problem, gdy próbuję ponownie załadować ten sam plik, ponieważ nie ma zmian w pliku, (zmiana) nie jest wyzwalana. W tym przypadku zasugeruj powiązanie zdarzenia.

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

Czy istnieje sposób na zresetowanie wartości wejściowej pliku typu do pustego.

Answer 1

Możesz uzyskać dostęp do pliku wejściowego jako ViewChild i pobrać z niego pliki.

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[] na nativeElement zawsze jest tablicą, nawet jeśli jest tylko jeden wybrany plik (lub brak, dla tej sprawy). Da ci obiekty plików dokładnie tak, jak gdybyś uzyskał dostęp do event.target.files ze zdarzenia (change), dzięki czemu możesz zrobić z nimi to, co chcesz po fakcie.

Należy jednak wspomnieć, że po wybraniu pliku na wejściu do pliku i wywołaniu zdarzenia zmiany plik nie został nigdzie "przesłany". Po prostu przekazuje przeglądarce odwołanie do niej (z kilkoma innymi metadanymi), z którymi klient może pracować. W rzeczywistości przesyłanie plików jest czymś, co musisz oddzielnie zaprogramować.

UPDATE:

W celu wymuszenia wejścia pliku do ognia zdarzenie zmienia się nawet przy wyborze pliku, który został wcześniej wybrany, wejście plik musi zostać zresetowany przez wyczyszczenie jej wartość, gdy przycisk Browse jest kliknięte. Ponieważ już używasz jQuery, możesz to zrobić tak: $('#fileupload').val("");.

See my forked Plunker dla przykładu wykonania.