Search code examples
javascriptimagedimension

To get image height and width of uploaded image before form submission

How to get an uploaded image's height and width before form submission, using jQuery or Javascript?

<input type="file" />

I need to check whether the width and height of the image to be uploaded are equal to the selected width and height. I have found this link. But it's only working for FF and Chrome, not in IE7 and IE8.

Can anyone show me any other way to get the dimensions so that it's working in all browsers?

Solution

  • You can create an image object, After creating image object get the image from the image tag which is showing the image to be uploaded and then you can get the dimension of the image by following method written ahead.

    var v=new Image();
v.src=document.getElementById("up_img").getAttribute('src');
alert(v.width);

    Remember you will have to use the Base64 method to get the image to be displayed in the image tag, i don't know whether it is supported in ie or not but it is the HTML5 facility available in Chrome ,Firefox, Opera.