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.

So, as neither uploading an image nor reloading a div via ajax is particulary rocket science, what have you tried so far? — ty812
– ty812, Commented Nov 1, 2009 at 11:40
No idea how to reload a div with ajax after an image upload. I'm not sure if i need to put in a delay to allow for the upload, or what. There are particulars at work and since javascript/ajax isn't my area of expertise I'm consulting the community at large for guidance. — mrpatg
– mrpatg, Commented Nov 1, 2009 at 11:45

Xavi Ivars · Accepted Answer · 2009-11-01 12:40:26Z

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.

answered Nov 1, 2009 at 12:40

Xavi Ivars

6441 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload an image and refresh div with new image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related