Angular2 dosya girişi onchange

Question

Giriş dosyam var (gönder - typicall giriş dosyası olmadan). Dosya seçerken bazı işlevleri çağırmak istiyorum.

Örnek: "Dosya seç" i tıklıyorum -> dosya seç -> şimdi sistem değişikliği algılar ve tüm bu dosya bilgilerini (örneğin resim adı) basan bazı işlevleri çağırır.

Giriş dosyasında ngModel kullanamıyorum, değil mi? Bu nasıl yapılır?

Answer 1

kullanın şablonunuzda aşağıdaki:

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

Sonra Bileşen fileChangeEvent()

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

olarak All Your Dosya bilgileri teselli edecektir ilgili ....

Answer 2

Çift H'nin işlevi değil' t ben onclick = "this.value = null" olana kadar çalışıyorum burada bulundu: https://stackoverflow.com/a/42357862/634650

Answer 3

İşte Double H'nin jQuery'ye güvenmemesi ve web paketinin e.target.result'da hata vermemesi yönündeki cevabım. Typescript Kod

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

}