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',

        }); 

    });

php 5

The final release of PHP 5 was announced on 13 July 2004.(as per php.net news archives)

Some of the key features of PHP 5 include:

• The Zend Engine II with a new object model and dozens of new features.
• XML support has been completely redone in PHP 5, all extensions are now focused around the excellent libxml2 library (http://www.xmlsoft.org/).
• A new SimpleXML extension for easily accessing and manipulating XML as PHP objects. It can also interface with the DOM extension and vice-versa.
• A brand new built-in SOAP extension for interoperability with Web Services.
• A new MySQL extension named MySQLi for developers using MySQL 4.1 and later. This new extension includes an object-oriented interface in addition to a traditional interface; as well as support for many of MySQL’s new features, such as prepared statements.
• SQLite has been bundled with PHP. For more information on SQLite, please visit their website.
• Streams have been greatly improved, including the ability to access low-level socket operations on streams.

Did I missed anything? or went wrong? if so, please let me know by commenting here.