Uploading image without page refresh?

[Dan06]

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.

[JonnoTheDev]

Yes it could but whats wrong with just auto reloading the page using a header command after the image is replaced:

 

  // form submitted
  if(isset($_POST['submit'])) {
     // upload image and replace database entry

     // delete original image
     @unlink();

     // reload edit page
     header("Location:edit-image.php?id=1234");
     exit();
  } 

[Dan06]

I have multiple forms on the edit page and I don't want to have the page reload every form. I got the image file to upload to the server and update the location of the file in the database 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. I'd like for javascript to monitor the updation of the file location in the database and once the file location information is updated in the database to display the image. Anyone know how to do that? Examples would be great. Thanks.