Uploading Images

I've seen this done on a few CMS systems such as Wordpress but I was wondering if anyone has a script or knows how to upload images on a page without having the page refreshed.

What I want to do is allow users to upload an image on a page and the image URL to be loaded into the field name for a product in an HTML form.

Anyone know how it's done?

 

Use a hidden IFRAME as the target for the form which submits the image.

When the upload is submitted it's processed by the hidden IFRAME. After its done processing you output some JS in the IFRAME which notifies the browser and you can dynamically updated the page as needed.

 

Sounds like you've done that before. Do you have any code showing how you did it?

 

I used that technique in my image hosting site, but it's part of a bigger AJAX application so the code wouldn't work for you. It's the same idea though.

<iframe name='uploadIFrame' src='' style='display:none'></iframe>

<form id='myForm' action='/upload.php' method='post' enctype='multipart/form-data' target='uploadIFrame'>


Now when you submit this form it would open up upload.php inside the uploadIFrame which is not visible. You process the upload like any other upload, but when it's done you print out simple HTML page with some JavaScript. The JavaScript has to target the parent of the IFRAME, which is the rest of the browser, from here it's up to you what you would like done.

You can also, and probably want to, do error checking and reporting using the same JavaScript from IFRAME to the parent method.

 

I'm definitely going to try and develope the image uploader using the method you've shown in this thread. I'll be back to pick your brain