Tutorial: How to find width and height of a uploaded image with JavaScript

This is more like a clever trick to find out the height and width of a uploaded image that i would like to share with you. This method most likely will be useful to you when you are dealing with asynchronous uploading which you required the width and height of the image so that you could display the size of the preview box or window. Another usage will be user will have the ability to pre-set the width and height of each images outside the upload function which will resize the uploaded image and you will either required to query the database or look up using server scripting ( both provide redundency). This method will eliminate the need of redundency of query the database or passing the data from server scripting to JavaScript. Instead, we will just required a few sentence of JavaScript to determine the width and height of the uploaded image.

Concept

Let's take an example to demonstrate the concept. Imagine you are trying to perform a asynchronous uploading function that allow users to view their uploaded images on the screen dynamically. So we can use the simple asynchronous uploading function to perform the upload function and use asynchronous complete detection function to inform the user that it has been completed. So once we know that the upload has completed, we want to preview this image to the user right? Assuming that the upload function resize this image randomly. So what is the resize width and height of this image? There are few method that can work this out,

1. Since we are doing asynchronous upload, we can provide the width and height of the image from the server to the client script
2. store the width and height of the new image to the database and query it using ajax function
3. Any other method that required additional work!

This is not efficient at all. What we really need is just JavaScript alone.

1. Upload the image
2. Upload completed
3. display it on the screen
4. set the width and height to be empty ( reset the width and height to null)
5. create a new image object and store the new image into it
6. retrieve the new image object width and height
7. change the width and height of the display screen to the new image object width and height
8. Ta-Da~

Simple and clean!

JavaScript

var imgObj = document.getElementById('uploadedImage');
var newImg = new Image();
newImg.src = imgObj.attr('src');

var height = newImg.height;
var width = newImg.width;

imgObj.style.width = width;
imgObj.style.height = height;

I shall skip the codes for PHP and HTML part on how it upload the file to the server and how the server return the images (just have to echo '' after it has been uploaded to the server) to the client as it has been demonstrated on the above link provided. What the JavaScript is trying to do is to retrieve the DOM object of the preview image send in back the server side after uploaded.  It creates a image object and insert that particular preview image into this object. Thus, we have all the information we need stored into this object and placed them into the preview box.

Demo

There are no demo for this method (since i can't store the uploaded images all on the server, it will blow after sometimes) but you can use the demo previously created on asynchronous complete detection function and add a few function into it to make it randomly resize the image you placed into, provide the width and height of each uploaded images via a pop up and resize the iframe according to the new width and height.