Проверка ширины и высоты изображения перед загрузкой с Javascript

Question

У меня есть JPS с формой, в которой пользователь может поместить изображение:

<div class="photo"> 
    <div>Photo (max 240x240 and 100 kb):</div> 
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/> 
</div> 

Я написал это Js:

function checkPhoto(target) { 
    if(target.files[0].type.indexOf("image") == -1) { 
     document.getElementById("photoLabel").innerHTML = "File not supported"; 
     return false; 
    } 
    if(target.files[0].size > 102400) { 
     document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)"; 
     return false; 
    } 
    document.getElementById("photoLabel").innerHTML = ""; 
    return true; 
} 

, который работает чтобы проверить тип и размер файла. Теперь я хочу проверить ширину и высоту изображения, но я не могу этого сделать.
Я пробовал с target.files[0].width, но я получаю undefined. С другими способами я получаю 0.
Любые предложения?

Answer 1

Файл просто файл, вам нужно создать образ как так:

var _URL = window.URL || window.webkitURL; 
$("#file").change(function (e) { 
    var file, img; 
    if ((file = this.files[0])) { 
     img = new Image(); 
     img.onload = function() { 
      alert(this.width + " " + this.height); 
     }; 
     img.src = _URL.createObjectURL(file); 
    } 
}); 

Демо: http://jsfiddle.net/4N6D9/1/

Я понимаю, вы понимаете, что это поддерживается только в нескольких браузерах , В большинстве случаев firefox и chrome, также могут быть операми.

Answer 2

Согласен. После того, как он будет загружен в браузер пользователя, доступ к нему будет довольно простым. Поскольку вам нужно дождаться загрузки изображения, вы захотите подключиться к событию onload для img.

var width, height; 

var img = document.createElement("img"); 
img.onload = function() { 
    // `naturalWidth`/`naturalHeight` aren't supported on <IE9. Fallback to normal width/height 
    // The natural size is the actual image size regardless of rendering. 
    // The 'normal' width/height are for the **rendered** size. 

    width = img.naturalWidth || img.width; 
    height = img.naturalHeight || img.height; 

    // Do something with the width and height 
} 

// Setting the source makes it start downloading and eventually call `onload` 
img.src = "http://your.website.com/userUploadedImage.jpg"; 

Answer 3

На мой взгляд идеальный ответ вы должны обязательно является

var reader = new FileReader(); 
    //Read the contents of Image File. 
    reader.readAsDataURL(fileUpload.files[0]); 
    reader.onload = function (e) { 
    //Initiate the JavaScript Image object. 
    var image = new Image(); 

    //Set the Base64 string return from FileReader as source. 
         image.src = e.target.result; 

         //Validate the File Height and Width. 
         image.onload = function() { 
          var height = this.height; 
          var width = this.width; 
          if (height > 100 || width > 100) { 
           alert("Height and Width must not exceed 100px."); 
           return false; 
          } 
          alert("Uploaded image has valid Height and Width."); 
          return true; 
         }; 

        }