How to easily upload files without form submission (with jQuery + AJAX)

Question

So I have some form processing code which processes the standard text inputs and also uploaded files (through the $_FILES array)

I want to have the submission done through AJAX

Will jQuery's post(). method still pass that stuff through -> $_FILES or do I need to do something special?

Answer 1

Ajax (as defined, using JavaScript) cannot perform file uploads, as JavaScript cannot access the local filesystem. There are workarounds that seem to use Ajax, such as an iframe or using Flash.

Hunt around Google, you'll find something. There are more libraries (YUI for example) that are putting this together.

Answer 2

To upload files via Ajax, you need to use a workaround using iframes or Flash.

I recommend you Uploadify, it uses flash to do the uploading, and uses jQuery. I like the fact that it has many settings, and it comes with a nice default style for the queue handling. Just follow the instructions to set it up in your site.

In the PHP script you'll receive the file in the $_FILES array, just like if it were a normal submission via a form, the default name is 'Filedata', so you can access your file via $_FILES['Filedata']. Then just echo the response for the Ajax request (JSON or XML), and execute some JS code for the Uploadify 'onComplete' event.

Answer 3

You can try using HTML 5's file upload API, which will require they drag and drop the file into the browser window. Read more here: http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

Additionally, you can do the same thing with Google Gears (which requires an install for IE but is default on Chrome).

It is possible to detect the presence of either and degrade gracefully.