web-dev-qa-db-ja.com

変更時のAngular2ファイル入力

入力ファイルがあります（送信なし-典型的な入力ファイル）。ファイルを選択したときにいくつかの関数を呼び出したいです。

例：[ファイルを選択]をクリック->ファイルを選択->システムが変更を検出し、これらすべてのファイル情報（画像名など）を印刷する関数を呼び出します。

入力ファイルでngModelを使用できませんか？どうやってするか？

fileangularupload
16
elzoy

テンプレートで次を使用します。

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

すべてのファイル関連情報がコンソールに表示されます...

45
Double H

これは、jQueryに依存せず、e.target.resultでのwebpackエラーを停止するためのDouble Hの答えに対する私の修正です。

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

TypeScriptコード

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

}

5
Kamalpreet

ここにあるようにonclick = "this.value = null"を追加するまで、Double Hの関数は機能しませんでした： https://stackoverflow.com/a/42357862/63465

4
Chris