Ajax Multiple file upload script with Progress bar, Drag and Drop

This script uses XMLHttpRequest for uploading multiple files with progress-bar with drag and drop feature in Firefox 3.6+, Safari 4+ and Chrome; and falls back to hidden iframe based upload in other browsers.

Features

• multiple file select, progress-bar in Firefox, Chrome, Safari
• drag-and-drop file select in Firefox, Chrome
• uploads are cancellable
• no external dependencies
• doesn’t use Flash
• fully working with https
• keyboard support in Firefox, Chrome, Safari

Demo:Check the demo
URL:http://valums.com/ajax-upload/
Download:Download the source code

Usage:

Download the script, unzip to a folder; let’s say ajax-upload-script in your root folder.

For me, its http://localhost/ajax-upload-script such that folders server,client, tests will be in your folder ajax-upload-script

Create a new file; let’s say upload.php in your ajax-upload-script folder.

Include fileuploader.js and fileuploader.css into upload.php

The required two files are in your ajax-upload-script/client folder.

<script src="client/fileuploader.js" language="javascript1.1"></script>
<link href="client/fileuploader.css" rel="stylesheet" type="text/css" media="all" />

Now create a container element on the page, which accepts the files, we drop to it.

  <div id="file-uploader">
        <noscript>
            <p>Please enable JavaScript to use file uploader.</p>
            <!-- or put a simple form for upload here -->
        </noscript>
    </div>

Now initialize your uploader. Paste the below the javascript below the container div tag.

 <script>
        function createUploader(){
            var uploader = new qq.FileUploader({
                //  pass the dom node (ex. $(selector)[0] for jQuery users)
                element: document.getElementById('file-uploader'),
               // path to server-side upload script. In our case server/php.php
               action: 'server/php.php'
            });
        }
        window.onload = createUploader;
    </script>

Pass the DOM node to the element, and the server side script path to the action.
This script comes with sever side script also, to upload files, in different platforms-PHP, Coldfusion, CGI and Java.

We will take the PHP file, php.php in server folder as our server side script to upload files.
You can delete the other platform files in this folder, no harm at all.

That’s all. Our Ajax multiple file upload script with progress bar, drag and drop is completed. Just open the file in browser http://localhost/ajax-upload-script/upload.php
You can upload the files by clicking the ‘Upload a File’ button or simply dragging and dropping files on it. Files will be uploaded to server/uploads folder.

Some test files and demos are there in tests folder. If you want to play with this script further, have a look into it. If not, you can simply delete it.

You can use jQuery also with this script, and other settings such as allowed extensions, file size limits and events.

    // additional data to send, name-value pairs
    params: {},

    // validation
    // ex. ['jpg', 'jpeg', 'png', 'gif'] or []
    allowedExtensions: [],
    // each file size limit in bytes
    // this option isn't supported in all browsers
    sizeLimit: 0, // max size
    minSizeLimit: 0, // min size

    // set to true to output server response to console
    debug: false,

    // events
    // you can return false to abort submit
    onSubmit: function(id, fileName){},
    onProgress: function(id, fileName, loaded, total){},
    onComplete: function(id, fileName, responseJSON){},
    onCancel: function(id, fileName){},

    messages: {
        // error messages, see qq.FileUploaderBasic for content
    },
    showMessage: function(message){ alert(message); }        

To Use with jQuery:

Include jQuery javascript into your page.

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

And replace the script below container DIV with this.

    jQuery(function(){
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader'),
          // url of the server-side upload script, should be on the same domain
	action: 'server/php.php',

        }); 

    });