Uploading multiple files using Ajax

In the previous task, we have learned how to upload a single file via a fake Ajax method using iframe. This example has one big disadvantage; we cannot select more than one file. This is possible only by using HTML5 (which is not fully supported by all browsers), Flash, or Java. In this recipe, we will build a form that will allow us to select multiple files and upload them on the server with one single click.

Getting ready

For this task, we will need to download jQuery library, SWFUpload library (http://swfupload.org/), and Adam Royle's SWFUpload jQuery plugin (http://blogs.bigfish.tv/adam/).

How to do it...

1. Let's start with HTML:

   <div id="swfupload-control">
     <p>Upload files.</p>
     <input type="button" id="button" value="Upload" />
     <p id="queuestatus"></p>
     <ol id="log"></ol>
   </div>

2. Next, we define CSS:

   <style>
   #swfupload-control p { margin:10px 5px; }
   #log li { list-style:none; margin:2px; padding...