web-dev-qa-db-ja.com

jQueryなしでサーバーにアップロードする前に、入力タグからAngular 2（or above）の画像の高さと幅を取得する方法は？

さまざまなソースをチェックしましたが、ほとんどのソリューションはjQueryにあります。可能であれば、TypeScriptのソリューションが必要です。

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 }

解決策はありますか、それとも完全に間違っていますか？

angulartypescriptfile-upload
6
Vijay

_@ViewChild and ElementRef_の組み合わせを使用して、ファイルアップロードコントロールにアクセスし、アップロードするたびにその値をクリアできます。そうしないと、_(change)_イベントが発生しません。

そして、FileReader()を使用してファイルをImageオブジェクトに読み込み、そこから幅と高さを取得できます。

以下にコードを示します-

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> 
_

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
  }
_

完全なコード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 = "";
  }  
}
_

これが実際のデモです： https://stackblitz.com/edit/angular-file-upload-hnik7q

編集：[(ngModel)]="selectedFile"を使用して、入力ファイルコントロールにアクセスし、検証とアップロードが完了した後に使用せずに値をクリアする_@ViewChild_およびElementRefは以下のように-

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

およびコンポーネントクラスで-

_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

ElementRefを使用してみてください。

まず、dom要素をマークする必要があります_#myImage_

次に、コンポーネントクラスでViewChildでdom要素をターゲットにできます

ViewChild('myImage') myImage: ElementRef;

ビューがロードされると、画像の詳細を抽出できます

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

Dom要素に関する情報を抽出しているだけなので、セキュリティリスクは低いです。この方法を使用してdom要素を変更しないことをお勧めします。

0
Ryan J