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,
- Since we are doing asynchronous upload, we can provide the width and height of the image from the server to the client script
- store the width and height of the new image to the database and query it using ajax function
- Any other method that required additional work!
- Upload the image
- Upload completed
- display it on the screen
- set the width and height to be empty ( reset the width and height to null)
- create a new image object and store the new image into it
- retrieve the new image object width and height
- change the width and height of the display screen to the new image object width and height
Simple and clean!
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;
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.