Question

我正在尝试使用jquery上传和预览图像。但得到这个

错误

Property 'result' does not exist on type 'EventTarget'.
reader.onload = function (e) {
 $('#blah').attr('src', e.target.result);
}

page.ts

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}


$('#file').on('change', function () {
  readURL(this);
});

page.html中

 <label for="file" class="lbl"><i class="fa fa-plus-circle"></i> &nbsp; Add Attachment</label>
<input type="file" id="file" style="visibility: hidden">
<img src="#" id="blah">

解决方案是什么？我认为这段代码是正确的，但问题就在于结果＆＃39;属性。提前致谢

Answer 1

很久以前我用这段代码预测离子图像

在html中

<input type="file" value="" (change)="fileChange($event)">
<img *ngIf="img1" [src]="img1"/>

在Javascript中

fileChange(event){
    if(event.target.files && event.target.files[0]){
      let reader = new FileReader();

      reader.onload = (event:any) => {
        this.img1 = event.target.result;
      }
      reader.readAsDataURL(event.target.files[0]);
    }
      let fileList: FileList = event.target.files;  
      let file: File = fileList[0];
      console.log(file);
  }

欢迎改进

Answer 2

离子4

以html

        <img class="logo" src="{{img_new}}" *ngIf="img_new!=''"/>

        <input type="file" name="image" accept="image/*" (change)="changeListener($event)">

在ts

changeListener($event): void {
        this.file = $event.target.files[0];
    console.log(this.file);
    let reader = new FileReader();
      reader.onload = ($event:any) => {
        this.img_new = $event.target.result;
      }
      reader.readAsDataURL($event.target.files[0]);
    }

如何在离子3上传之前预览图像？

2 个答案: