驗證客戶端輸入中的圖像文件尺寸AngularJS

我想在驗證圖像尺寸之前將其上傳到客戶端的服務器。我試圖找到它的解決方案，但我可以找到與img.Onload（），我不尋找的解決方案。

我只希望用戶從
<input id="selectThumb" name="myImage" type="file" accept="image/*" onchange="angular.element(this).scope().fileName(this)" </input>
中選擇圖像，選擇文件後，只有名稱應該顯示，並且如果圖像大於172X152px，應該顯示一些提示。我不是預覽圖像或任何東西。「fileName（this）」函數給我的圖像文件的名稱，我無法獲得圖像的尺寸，因此無法驗證它們。 PS，我在我的指令中定義了這個函數。

再一次，我想在用戶選擇文件時顯示警告，如果他的文件沒有資格上傳，即大於172X152像素。我沒有在我的頁面上加載圖像文件或預覽它。驗證客戶端輸入中的圖像文件尺寸AngularJS

來源

2015-07-03 Neeraj Kumar

恐怕你必須使用Image.onLoad。但不要擔心圖像不需要顯示在任何地方。

實施例是這裏Getting Image Dimensions using Javascript File API

var fr = new FileReader; 

    fr.onload = function() { // file is loaded 
     var img = new Image; 

     img.onload = function() { 
      //TODO: Add your validation here 
      alert(img.width); // image is loaded; sizes are available 
     }; 

     img.src = fr.result; // is the data URL because called with readAsDataURL 
    }; 

    fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating

來源

2015-07-03 07:40:37

驗證客戶端輸入中的圖像文件尺寸AngularJS

回答

相關問題