Drag & Drop a image via jQuery to get image dimensions

Question

I using jquery-filedrop and i allowed user to upload file only PNG & JPG

But how can I check image size (like pixel) ?

Possible to get image size in file object ?

After I looked at the file object in console.log , it's nothing about image size.

Or I have to check in PHP or append image so .width() & .height() (REF)?

Answer 1

According to this answer of Georg Schölly:

// find the element
var img = $('#imageid');

/* 
 * create an offscreen image that isn't scaled
 * but contains the same image.
 * Because it's cached it should be instantly here.
 */

var theImage = new Image();
theImage.src = img.attr("src");

// you should check here if the image has finished loading
// this can be done with theImage.complete

alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

Answer 2

Ok , I post like this to PHP

$size = getimagesize($_FILES['name']['tmp_name']);

    if($size[0]===150 && $size[1]===150) {
       // done
    } else {
       // error
    }