revolunet/sample html5 drag drop, upload and progressbar.html

## sample html5 drag drop, upload and progressbar.html
<body>

    <div id="dropzone">
        <h1>Drop files here 2</h1>
        <p>To add them as attachments</p>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">

    $(function() {

        // SET LISTENERS for DD
        /* We cannot use $.bind() since jQuery does not normalize the native events. */
        $('#dropzone')
            .get(0)
            .addEventListener('drop', dropped, false);
        $('#dropzone')
            .get(0)
            .addEventListener('dragenter', function(event) {
                    $('#dropzone').css("background-color", "#ffc");
                }, false);
        $('#dropzone')
            .get(0)
            .addEventListener('dragexit', function(event) {
                    $('#dropzone').css("background-color", "#fff");
                }, false);
        $('#dropzone')
            .get(0)
            .addEventListener('dragover', function(event) {
                    event.preventDefault();
                }, false);


        // handle multiple files
        function dropped(event) {
            var files = event.dataTransfer.files;
            for(var i = 0, len = files.length; i < len; i++) {
                console.log('added ' + files[i].fileName + ' ('+Math.round((files[i].fileSize/1024*100000)/100000)+'K ) to queue');
                uploadFile(files[i], i);
            }
            // disable ff event propagation
            event.stopPropagation();
        }

        function uploadFile(file, index) {
            var xhr = new XMLHttpRequest(),
                loader;
                fileUpload = xhr.upload;

            fileUpload.addEventListener("progress", function(event) {
                if (event.lengthComputable) {
                    var percentage = Math.round((event.loaded * 100) / event.total);
                    console.log('progress', index, percentage);
                }
            }, false);

            fileUpload.addEventListener("load", function(event) {
                console.log('loaded', index);
            }, false);

            fileUpload.addEventListener("error", function(evt) {
                console.log('error', evt.code, index);
            }, false);

            // POST DATA
            xhr.open("POST", "upload.php", true);
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xhr.setRequestHeader("X-File-Name", file.fileName);
            xhr.setRequestHeader("X-File-Size", file.fileSize);
            xhr.setRequestHeader("Content-Type", "multipart/form-data");
            xhr.send(file);
       }
    });

    </script>

</body>
	<body>

	<div id="dropzone">
	<h1>Drop files here 2</h1>
	<p>To add them as attachments</p>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">

	$(function() {

	// SET LISTENERS for DD
	/* We cannot use $.bind() since jQuery does not normalize the native events. */
	$('#dropzone')
	.get(0)
	.addEventListener('drop', dropped, false);
	$('#dropzone')
	.get(0)
	.addEventListener('dragenter', function(event) {
	$('#dropzone').css("background-color", "#ffc");
	}, false);
	$('#dropzone')
	.get(0)
	.addEventListener('dragexit', function(event) {
	$('#dropzone').css("background-color", "#fff");
	}, false);
	$('#dropzone')
	.get(0)
	.addEventListener('dragover', function(event) {
	event.preventDefault();
	}, false);


	// handle multiple files
	function dropped(event) {
	var files = event.dataTransfer.files;
	for(var i = 0, len = files.length; i < len; i++) {
	console.log('added ' + files[i].fileName + ' ('+Math.round((files[i].fileSize/1024*100000)/100000)+'K ) to queue');
	uploadFile(files[i], i);
	}
	// disable ff event propagation
	event.stopPropagation();
	}

	function uploadFile(file, index) {
	var xhr = new XMLHttpRequest(),
	loader;
	fileUpload = xhr.upload;

	fileUpload.addEventListener("progress", function(event) {
	if (event.lengthComputable) {
	var percentage = Math.round((event.loaded * 100) / event.total);
	console.log('progress', index, percentage);
	}
	}, false);

	fileUpload.addEventListener("load", function(event) {
	console.log('loaded', index);
	}, false);

	fileUpload.addEventListener("error", function(evt) {
	console.log('error', evt.code, index);
	}, false);

	// POST DATA
	xhr.open("POST", "upload.php", true);
	xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
	xhr.setRequestHeader("X-File-Name", file.fileName);
	xhr.setRequestHeader("X-File-Size", file.fileSize);
	xhr.setRequestHeader("Content-Type", "multipart/form-data");
	xhr.send(file);
	}
	});

	</script>

	</body>