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

Question

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?

Answer 1

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.

Answer 2

For security reasons IE9, IE8, IE7 do not support accessing files on the client's computer; that's why you are not getting any width or height. You would need to upload the image onto your server and then display it to some image control and get the height and width. You can set visibility:hidden if you don't want the image to be visible.

BIRD'S VIEW

One way could be that on upload, you show a progress bar while using Ajax to save the file to a temporary folder on your server with the image name as a temporary ID and store the ID in the database (so that you can delete it later) and then display it in the image control. Then get the height and width.