web-dev-qa-db-fra.com

Comment obtenir la hauteur et la largeur d'une image dans Angular 2 (ou plus) à partir de la balise d'entrée avant de la télécharger sur le serveur sans jQuery?

J'ai vérifié différentes sources mais la plupart des solutions sont en jQuery. Je veux la solution en TypeScript si possible.

HTML -

<input #coverFilesInput class="file-input" type="file"(change)="onChange($event)"....>

TypeScript -

onChange($event) { let img = event.target.files[0]; // and then I need code to validate image size }

Y a-t-il une solution ou est-ce que je le fais complètement mal?

angulartypescriptfile-upload
6
Vijay

Vous pouvez utiliser la combinaison de @ViewChild and ElementRef Pour accéder au contrôle de téléchargement de fichier et effacer sa valeur après chaque téléchargement, sinon l'événement (change) Ne se déclencherait pas.

Et puis vous pouvez utiliser FileReader() pour lire le fichier dans un objet Image et en obtenir la largeur et la hauteur.

Voici le code ci-dessous -

Modèle HTML 

<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input"  />
    Upload Percent: {{percentDone}}% <br />

    <ng-container *ngIf="uploadSuccess">
      Upload Successful of file with size : {{size}} bytes <br>
      The image height is : {{height}} <br>
      The image width is : {{width}} <br>
    </ng-container>

La méthode onChange 

onChange(evt:any){
   this.percentDone = 100;
   this.uploadSuccess = true;
   let image:any = evt.target.files[0];
   this.size = image.size;
   let fr = new FileReader();
   fr.onload = () => { // when file has loaded
    var img = new Image();
    img.onload = () => {
        this.width = img.width;
        this.height = img.height;
    };

    img.src = fr.result; // The data URL 
};

  fr.readAsDataURL(image);
   this.imgType.nativeElement.value = ""; // clear the value after upload
  }

code complet app.component.ts 

import { Component, VERSION ,ViewChild,ElementRef} from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" #coverFilesInput (change)="onChange($event)" class="file-input"  />
    Upload Percent: {{percentDone}}% <br />

    <ng-container *ngIf="uploadSuccess">
      Upload Successful of file with size : {{size}} bytes <br>
      The image height is : {{height}} <br>
      The image width is : {{width}} <br>
    </ng-container> 
  `,
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;
  size:any;
  width:number;
  height:number;

  @ViewChild('coverFilesInput') imgType:ElementRef;

  constructor(
    ) { }

  version = VERSION

  onChange(evt:any){
   this.percentDone = 100;
   this.uploadSuccess = true;
   let image:any = evt.target.files[0];
   this.size = image.size;
   let fr = new FileReader();
   fr.onload = () => { // when file has loaded
    var img = new Image();

    img.onload = () => {
        this.width = img.width;
        this.height = img.height;
    };

    img.src = fr.result; // This is the data URL 
   };

  fr.readAsDataURL(image);
   this.imgType.nativeElement.value = "";
  }  
}

Voici une démonstration de travail: https://stackblitz.com/edit/angular-file-upload-hnik7q

Modifier: vous pouvez également utiliser [(ngModel)]="selectedFile" pour accéder au contrôle du fichier d'entrée et effacer sa valeur une fois la validation et le téléchargement effectués sans utiliser @ViewChild Et ElementRef comme ci-dessous -

<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input"  [(ngModel)]="selectedFile"/>

et dans la classe de composants -

export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;
  size:any;
  width:number;
  height:number;
  selectedFile:any; // declare the property

  constructor(
    ) { }

  version = VERSION

  onChange(evt:any){
   this.percentDone = 100;
   this.uploadSuccess = true;
   let image:any = evt.target.files[0];
   this.size = image.size;
   let fr = new FileReader();
   fr.onload = () => { // when file has loaded
    var img = new Image();    
    img.onload = () => {
        this.width = img.width;
        this.height = img.height;
    };    
    img.src = fr.result; // This is the data URL 
};    
  fr.readAsDataURL(image);
  this.selectedFile = ""; // clear the file here
  }        
}
6
Niladri

Essayez d'utiliser le ElementRef.

Vous devez d'abord marquer votre élément dom #myImage

Ensuite, dans votre classe de composants, vous pouvez cibler l'élément dom avec ViewChild

ViewChild('myImage') myImage: ElementRef;

Une fois la vue chargée, vous pouvez extraire les détails de l'image

ngAfterViewInit() { console.log(this.myImage.nativeElement.offsetWidth); console.log(this.myImage.nativeElement.offsetHeight); }

Comme vous extrayez simplement des informations sur l'élément dom, le risque de sécurité est faible. Je vous conseille de ne pas modifier les éléments dom en utilisant cette méthode.

0
Ryan J