上传时显示预览图像

Question

I created a image upload form where I need the image to preview when select the image. But when I upload the file , i must click the on the page for show it .

    fileProgress(fileInput: any): void {
    this.fileData = <File>fileInput.target.files[0];
    this.preview();
  }

  preview(): void {
    // Show preview 
    const mimeType = this.fileData.type;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }

    const reader = new FileReader();
    reader.readAsDataURL(this.fileData);
    reader.onload = (_event) => {
      this.previewUrl = reader.result;
    }
  }

and this is html :

 <div class="form-group kt-form__group row">
                    <!-- Preview -->
                    <div *ngIf="previewUrl!=null"
                        class="justify-content-center text-center col-lg-6 kt-margin-bottom-20-mobile">
                        <img [src]="previewUrl" />
                    </div>
                </div>

<ngx-mat-file-input (change)="fileProgress($event)"></ngx-mat-file-input>

Answer 1

You can use file upload

First, set your html like this

 <img [src]="imageSrc" style="max-width:300px;max-height:300px" />
 <input name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" />

Secondly, handle input file

imageSrc:string = '';

handleInputChange(e) {
   let file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
   let pattern = /image-*/;
   let reader = new FileReader();
   if (!file.type.match(pattern)) {
     alert('invalid format');
     return;
   }
   reader.onload = this._handleReaderLoaded.bind(this);
   reader.readAsDataURL(file);
 }

 _handleReaderLoaded(e) {
   let reader = e.target;
   this.imageSrc = reader.result;
 }

Please examine example