Uploading image without page refresh?

[dan0]

I want to create an edit page that allows the user to select an image and insert/update that image into a database, and upon successful insertion of the image, immediately display that image in the edit page all without refreshing/reloading the page. I'm pretty sure AJAX can't do what I've described. Does anyone know how to do it? Examples/tutorials would be appreciated. Thanks.

[nighthawks]

A good question, please let me inform when you get an ans.

[jscheuer1]

AJAX in and of itself cannot do all of that. A bit of server side stuff would need to be going on. However, AJAX could probably be set up with some javascript to monitor the progress of a request or repeated request for the image uploaded as an image element object. The combination of the request returning 4 and/or the image element object's signaling load or complete status shouldn't happen until the image is available, at which point it could be displayed.

[dan0]

I got the image file to upload to the server without refreshing the entire page by using an iframe, below is the code.

<form name="ImgForm" id="ImgForm" enctype="multipart/form-data" method="post" action="image_upload.php" target="imgUploadFrame">
    <label class="label">Upload Picture:<br/>
    <input type="file" name="imgFile" id="imgFile" /><input type="submit" name="saveImg" value="Save" /></label>
</form>
<iframe name="imgUploadFrame" id="imgUploadFrame"></iframe>

However, I'm having trouble with displaying the image once the file is successfully uploaded.

AJAX could probably be set up with some javascript to monitor the progress of a request or repeated request for the image uploaded as an image element object.

Could you give an example of the above?