Hi!

I need to be able to upload images without reloading the entire page. I already know how to upload files via HTTP, but I need help with the other part.

I have a form with some fields, where it should also be possible to add images. When selecting a file and pressing 'Upload' I need the file to be uploaded without submiting the entire form. The images will then be added to the form in some way, and when finally submitting the form the data (including the uploaded files) will be processed and stored in a database.

Thanks
lizciz

You do not understand what is http request and http response. It is impossible to upload a file to server without submitting some form. The trick is that you *do not see* that form being submitted, but still it is submitted. It is called AJAX. Your browser sends the file by submitting some hidden form, the file is processed on server with regular file uploads mechanism and then server returns some data which is processed by some javascript object which called hiddenform.submit() and should now represent the received data to user.

Ok, so basically I can put the upload field in a separate form and submit it "behind the scenes", while the main form is still not submited?

I don't know anything about AJAX basically. Know a good place to start?

You can perform file uploads asynchronously - without an apparent refresh but it is not true Ajax. The javascript XMLHttpRequest object central to AJAX cannot access the clients file system for security reasons.

Can be done by using a hidden iframe and posting the form to the iframe. It has the same effect as Ajax.

Couple of good scripts one with a progress bar

http://php5.bluga.net/UploadProgressMeter/demo.php
http://thecodecentral.com/2007/09/04...-yuis-approach

Thanks for your awnsers. I've read a bit about AJAX now and searched for some scripts. Instead of letting some AJAX upload the images, which you pointed out is not possible due to security risks, It seems I can get the XMLHttpRequest object to send the information from a file input field to a php file which will make the upload. The php file could then return some value in order for me to know that the upload went ok, and a hidden field would be added in the form holding the uploaded image path, so that it can be stored in a database.

I think this is the aproach they used in seccond link you posted maxxximus.
Just one last question, what does asynchronously mean?

Not sure if this will help you, but I prefer the method with flash uploader and one php script behind the scene, because it's cute ;-)

Flash can show you how big is the file, percentage of completion and you don't have to play with iframes and forms etc, only flash and one php script.

see here http://www.flash-db.com/Tutorials/upload/

Funny you should say that, just yesterday I finally got my script working, using flash and one script file handling the uploads.
I'm using 'MultiPow Upload', it's really great.

heh, I just joined yesterday, but I'm glad that you've found the correct solution ;-)

hi guys,

just joined the site. i've just come across this requirement for a job and thought i'd add my bit. on another site i had successfully ran a php file externally using AJAX. The job of the php page was to send an email which is does. However when i tried the same method to upload a file it didn't work. I put this down to the fact that, on the email sending example it was merely getting the values of the form, whereas on the file upload attempt it didn't quite work. i had tested the upload php page with a standard form submit method and it worked fine, any clues on why?

when uploading a file with php and you have the attribute enctype="multipart/form-data" on a form, is the only way this extra data transferred by doing a standard sumbit? i'm thinking yep as on the php upload page we don't actually use $_REQUEST and use $_FILES instead?

From reading the thread i've cottoned onto the idea using a hidden iframe and will get back to you with my results.


thx for any thoughts or confirmations

I would recommend using a mix of PHP and AJAX in order to achieve this. Ajax is gaining popularity very fast. With that, you will be able to accomplish exactly what you are trying to do.

Just because you can do something doesn't mean that you should.
It's good when a tab click takes effect immediately, changing the panel area without a full page reload. But... How many picture per page?