如何檢查上傳

Question

的圖片上傳前圖像的寬度和高度，我寫了下面的HTML代碼：

<input type="file" id="upload" class="im" onchange="fileSelectHandlerProfile('defaultProfile','true')" style="cursor:pointer"/> 

當我們選擇圖像做，

這個代碼將被解僱：

function fileSelectHandlerProfile(title, defalutProfile) { 
    var oFile; 
    oFile = $('#thumbUploadProfile')[0].files[0]; 
    var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i; 
    if (!rFilter.test(oFile.type)) { 
     $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show(); 
    } 
} 

我想檢查文件的寬度和高度，怎麼可能像oFile.type？

Answer 1

可以做到這一點在2個步驟：

1. 使用HTML5文件API讀取的圖像文件的內容作爲數據網址：

var reader = new FileReader(); 
reader.onloadend = function() { 
    //var dataUrl = reader.result; 
    //code as per step 2 here... 
} 
reader.readAsDataURL(oFile); 

//ref: https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL 

現在通過以dataUrl作爲src創建Image對象來讀取圖像大小。

詳情：JS - get image width and height from the base64 code

Answer 2

的FileReader API允許您使用FileReader.readAsDataURL讀取文件作爲data:網址。使用該URL作爲<img />標記的src屬性，並閱讀該圖像的width和height屬性。

Answer 3

var width; 
    var height; 
    var oFile; 
    oFile = $('#thumbUploadProfile')[0].files[0]; 

    var reader = new FileReader(); 
    reader.onload = function(e){ 
     var image = new Image(); 
     image.onload = function(){    
      width = img.width; 
      height = img.height; 
     } 
     image.src = e.target.result; 
    }; 
    reader.readAsDataURL(oFile); 

Answer 4

一個解決方案是加載它clienside並檢查高度和寬度。

function fileSelectHandlerProfile(title, defalutProfile) { 
var oFile; 
oFile = $('#thumbUploadProfile')[0].files[0]; 
var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i; 
if (!rFilter.test(oFile.type)) { 
    $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show(); 
} 

var picReader = new FileReader(); 

picReader.addEventListener("load", function (event) { 

    var imageObj = new Image(); 
    imageObj.src = event.target.result; 
    imageObj.onload = function() { 
     //TEST IMAGE SIZE 
     if (imageObj.height < 100 || imageObj.width < 100) { 
      $('.errorProfile').html('Please select an image with correct dimensions').show(); 
     } 
    }; 
}); 

//Read the image 
picReader.readAsDataURL(oFile); 

}