Ajax/JQuery File Upload

Ok. So there is a serious demand for Ajax forms now a days. Processing the form on the fly. Well, I've ran into this a few time, having to post forms via jquery or ajax and display a response to the user without refreshing the page.

And it was one of those problems where you know that everything is setup correctly and that there's some syntax issue going on that you haven't noticed yet. Well it was that case here as well. I was trying to post a multipart form to upload an image and send an email with the link to the recepient.

Problem with that is jquery cannot process files. I know it sucks but thats just the reality of it. Gladly, since I'm not a freakin newbie to the internet like I felt when I was trying to figure out that issue, I am able to search and find the solutions I need to most of my coding problems.

It isn't possible to do the file upload with javascript.

In order to give the 'AJAX' feel, however, you can submit a form to a hidden iframe and output the script results to it, then process from there. Google ajax iframe upload and get started from there.

If you are using jQuery, there is also the Form plugin which will automatically create this iframe for you if your form has any file fields in it. I haven't used it to do this, but I've heard good things.

You can also use something like the very popular SWFUpload to accomplish the desired effect with Flash.

This feature will definitely be encorporated into our Simple-n-Easy CMS in the near future for photo uploads and for file uploads throughout the site along with some other neat ajax features to make it even easier to use.

Below is a link to the issue and the solution just incase you want to learn some more.

References:

Issue - http://stackoverflow.com/questions/543926/is-it-possible-to-ajax-a-file-upload/543927

Solution - http://www.webtoolkit.info/ajax-file-upload.html