dvdpearson/script.js

## gistfile1.txt
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Mini Ajax File Upload Form</title>

        <!-- Google web fonts -->
        <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />

        <!-- The main CSS file -->
        <link href="assets/css/style.css" rel="stylesheet" />
    </head>

    <body>

        <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
            <div id="drop">
                Drop Here

                <a>Browse</a>
                <input type="file" name="upl" multiple />
            </div>

            <ul>
                <!-- The file uploads will be shown here -->
            </ul>

        </form>

        <!-- JavaScript Includes -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="assets/js/jquery.knob.js"></script>

        <!-- jQuery File Upload Dependencies -->
        <script src="assets/js/jquery.ui.widget.js"></script>
        <script src="assets/js/jquery.iframe-transport.js"></script>
        <script src="assets/js/jquery.fileupload.js"></script>

        <!-- Our main JS file -->
        <script src="assets/js/script.js"></script>

    </body>
</html>

## gistfile2.txt
<li class="working">
    <input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />
    <p>Sunset.jpg <i>145 KB</i></p>
    <span></span>
</li>

## gistfile3.txt
<?php

// A list of permitted file extensions
$allowed = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit;
    }

    if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
        echo '{"status":"success"}';
        exit;
    }
}

echo '{"status":"error"}';
exit;

## script.js
$(function(){

    var ul = $('#upload ul');

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });

    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8"/>
	<title>Mini Ajax File Upload Form</title>

	<!-- Google web fonts -->
	<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />

	<!-- The main CSS file -->
	<link href="assets/css/style.css" rel="stylesheet" />
	</head>

	<body>

	<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
	<div id="drop">
	Drop Here

	<a>Browse</a>
	<input type="file" name="upl" multiple />
	</div>

	<ul>
	<!-- The file uploads will be shown here -->
	</ul>

	</form>

	<!-- JavaScript Includes -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="assets/js/jquery.knob.js"></script>

	<!-- jQuery File Upload Dependencies -->
	<script src="assets/js/jquery.ui.widget.js"></script>
	<script src="assets/js/jquery.iframe-transport.js"></script>
	<script src="assets/js/jquery.fileupload.js"></script>

	<!-- Our main JS file -->
	<script src="assets/js/script.js"></script>

	</body>
	</html>
	<li class="working">
	<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />
	<p>Sunset.jpg <i>145 KB</i></p>
	<span></span>
	</li>
	<?php

	// A list of permitted file extensions
	$allowed = array('png', 'jpg', 'gif','zip');

	if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

	$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

	if(!in_array(strtolower($extension), $allowed)){
	echo '{"status":"error"}';
	exit;
	}

	if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
	echo '{"status":"success"}';
	exit;
	}
	}

	echo '{"status":"error"}';
	exit;
	$(function(){

	var ul = $('#upload ul');

	$('#drop a').click(function(){
	// Simulate a click on the file input button
	// to show the file browser dialog
	$(this).parent().find('input').click();
	});

	// Initialize the jQuery File Upload plugin
	$('#upload').fileupload({

	// This element will accept file drag/drop uploading
	dropZone: $('#drop'),

	// This function is called when a file is added to the queue;
	// either via the browse button, or via drag/drop:
	add: function (e, data) {

	var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
	' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

	// Append the file name and file size
	tpl.find('p').text(data.files[0].name)
	.append('<i>' + formatFileSize(data.files[0].size) + '</i>');

	// Add the HTML to the UL element
	data.context = tpl.appendTo(ul);

	// Initialize the knob plugin
	tpl.find('input').knob();

	// Listen for clicks on the cancel icon
	tpl.find('span').click(function(){

	if(tpl.hasClass('working')){
	jqXHR.abort();
	}

	tpl.fadeOut(function(){
	tpl.remove();
	});

	});

	// Automatically upload the file once it is added to the queue
	var jqXHR = data.submit();
	},

	progress: function(e, data){

	// Calculate the completion percentage of the upload
	var progress = parseInt(data.loaded / data.total * 100, 10);

	// Update the hidden input field and trigger a change
	// so that the jQuery knob plugin knows to update the dial
	data.context.find('input').val(progress).change();

	if(progress == 100){
	data.context.removeClass('working');
	}
	},

	fail:function(e, data){
	// Something has gone wrong!
	data.context.addClass('error');
	}

	});

	// Prevent the default action when a file is dropped on the window
	$(document).on('drop dragover', function (e) {
	e.preventDefault();
	});

	// Helper function that formats the file sizes
	function formatFileSize(bytes) {
	if (typeof bytes !== 'number') {
	return '';
	}

	if (bytes >= 1000000000) {
	return (bytes / 1000000000).toFixed(2) + ' GB';
	}

	if (bytes >= 1000000) {
	return (bytes / 1000000).toFixed(2) + ' MB';
	}

	return (bytes / 1000).toFixed(2) + ' KB';
	}

	});