Angular2 파일 입력 onchange

Question

입력 파일이 있습니다 (제출 - typicall 입력 파일 없음). 파일을 선택할 때 몇 가지 함수를 호출하고 싶습니다.

예 :"파일 선택"-> 파일 선택 -> 이제 시스템이 변경 사항을 감지하고 이러한 모든 파일 정보 (예 : 이미지 이름)를 인쇄하는 일부 기능을 호출합니다.

입력 파일에 ngModel을 사용할 수 없습니까? 그렇게하는 방법?

Answer 1

를 사용하여 템플릿에서 다음

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

그런 다음 구성 요소 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]); 
    } 
} 

으로 모든 파일 정보가 콘솔 것이다 관련은 ....

Answer 2

더블 H의 기능은 'didn를 내가 여기 올 때까지 onclick = "this.value = null"을 추가 할 때까지 나를 위해 일하지 마라. https://stackoverflow.com/a/42357862/634650

Answer 3

jQuery에 의존하지 말고 e.target.result에서 오류가 발생하는 webpack을 멈추게하려면 Double H의 답변을 수정해야합니다. 타이프 코드

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

}