Upload an image and refresh div with new image

Question

I have the following code

<div id=form>
    <div id=viewimage>
        <img src="placeholder.png">
    </div>
    <div id=upload>
        <form action="upload.php" method=POST enctype="multipart/form-data">
            <input type=file name=image>
            <input type=submit value=Upload>
        </form>
    </div>
</div>

I need the image to be uploaded and then the #viewimage div to be refreshed with the submitted picture. When the form submits, the upload.php will return a file name of the uploaded file. I think this is an ajax question, but im a complete noob when it comes to ajax/javascript, so i dont have the slightest idea how to proceed.

Answer 1

If you want do do it in ajax, you should put your form inside an iframe, so when you upload the image, only a small part of the page (the form) is sent to your server.

After that, you can use upload.php response to get the name and path of uploaded image, and then you can just change the src of the img tag.