How to upload & display image on same page?

[dan0]

I've put together a page that allows a user to upload images. I also have put together a php class that creates thumbnails of the upload image(s). I want to upload the images, display the thumbnails on the same page, without reloading the page. I thought of using javascript (ajax) to check for the uploaded images, and then invoking the php thumbnail script via:



document.getElementById("displayData").innerHTML = 'thumbnails->display();';


However, while I can insert the above into the target element nothing happens since the page hasn't reloaded/interacted with the server; and obviously if the page reloads the above js would be cleared. Anyone have suggestions on how to accomplish my goal?

[dan0]

The solution was to have a trigger cause an ajax request and display the ajax response in the target element.

[JasonDFR]

That sounds really cool. Post the code please!