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の答えに対する私の修正があります。

<img [src]="imageSrc" alt="" /> 
<input type="file" capture="camera" accept="image/*" (change)="displayPhoto($event)"> 

活字体コード

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

}