jsbin.eKubOGE.css

body {
  padding: 0;
  margin: 0;
  
  background: #3FA8C6;
  background-image: -moz-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3fa8c6), color-stop(0%,#3fa8c6), color-stop(100%,#399ab2));
  background-image: -webkit-linear-gradient(top, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
  background-image: -o-linear-gradient(top, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
  background-image: -ms-linear-gradient(top, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
  background-image: linear-gradient(to bottom, #3fa8c6 0%,#3fa8c6 0%,#399ab2 100%);
  color: #fff; 
  
  font-family: 'Doppio One', sans-serif; 
  text-shadow: 0 1px 0 rgba(0,0,0,.3); 
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  width: 50%;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.03em;
  font-size: 2em;
}

a { 
  border-bottom: 1px solid #fff; 
  border-bottom: 1px solid rgba(255,255,255,0.7); 
  padding-bottom: 0.15em;
  position: relative;
  
  color: white;
  text-decoration: none; 
}

a:after {
  content: '';
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: -2px;
  background: rgba(0,0,0,.1);
}

a:hover {
  color: #C0E3EC;
}

h1 { 
  margin: 0.667em 0 0;
  padding-left: 0.5em;
  text-align: left; 
}

h2 {
  font-size: 1.5em;
}

small {
  margin-top: 1em;
  display: block;
  font-style: italic;
  font-size: 0.667em;
}

p em {
  font-style: none;
}

#welcome {
  position: relative;
  overflow: hidden;
  padding-bottom: 1em;
  padding-left: 20px;
}

#welcome > div {
  padding-top: 1px; 
}

#dave {
  float: left;
  margin-top: 3em
}

#welcome > h2 {
  margin-top: 0.5em;
  padding-left: 0.5em;
  margin-bottom: 0;
}

.bubble p {
  line-height: 22px; 
}

.bubble {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);

  padding: 0.667em 1em;
  position: relative;
}

.bubble:after {
  content: "";
  position: absolute;
  
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  border-right: 20px solid white; 
  border-right-color: inherit;
  top: 50px;
  left: -20px;
}

#features {
  margin: 0.444em 0 0;
  clear: both;
}

#features > h2 {
  margin: 0;
}

#features ol {
  position: relative;
  padding: 1em 0 1.5em;
  background: rgba(0,0,0,.1);
  border-color: rgba(0,0,0,.1);
  margin: 0;
  overflow: hidden;
  list-style: none;
  counter-reset: item;
}

#features li {
  width: 30%;
  padding: 0 1.5%;
  float: left;
  text-align: center;
  margin-bottom: 1em;
}

#features li h2 {
  display: block;
  padding: 1em;
  margin: 0.667em auto 1em;
  font-size: 1em;
  
  line-height: 1em;
  text-align: center;
  
  background: rgba(0,0,0,.1);
  border-radius: 2em;
  box-shadow: inset 0 0 1em rgba(0,0,0,.1), 0 2px 2px rgba(255,255,255,.1);
}

#next > div {
  width: 45%;
  float: left;
  padding: 0 2.5%;
}

img {
  z-index: 1;
  -webkit-transition: -webkit-transform 2s ease-in-out;
 -moz-transition: -moz-transform 2s ease-in-out;
 -o-transition: -o-transform 2s ease-in-out;
 -ms-transition: -ms-transform 2s ease-in-out;
 transition: transform 2s ease-in-out;
 position: relative;
}

img:active {
  -webkit-transform: rotate(1440deg) scale(1.2);
  -moz-transform: rotate(1440deg) scale(1.2);
  -o-transform: rotate(1440deg) scale(1.2);
  -ms-transform: rotate(1440deg) scale(1.2);
  transform: rotate(1440deg) scale(1.2);
}

@media screen and (max-width: 1200px) {
  .wrapper {
    width: 80%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper {
    width: auto;
    margin: 0;
  }
  #welcome {
    margin-right: 2.5%;
  }
}

@media screen and (max-width: 500px) {
  .wrapper {
    text-align: center;
  }
  #dave {
    float: none;
  }
  
  #welcome {
	padding: 0 1.5em;
    margin: 0;
  }
  
  h1 {
    text-align: center;
    margin-bottom: 0;
    padding-left: 0;
    font-size: 1.8em;
  }
  #welcome > h2 {
    margin-bottom: 0.667em;
  }
  .bubble {
    text-align: center;
  }
  .bubble:after {
    display: none;
  }
  #features li {
    width: 47%;
  }
  #features li:last-child {
    float: none;
    clear: both;
    margin: 0 auto;
  }
  
  #next > div {
    float none;
    width: auto;
  }
}

jsbin.eKubOGE.html

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.html5_upload.js" type="text/javascript"></script>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    </head>
    <body>
        <input type="file" multiple="multiple" id="upload_field" />
        <div id="progress_report">
            <div id="progress_report_name"></div>
            <div id="progress_report_status" style="font-style: italic;"></div>
            <div id="progress_report_bar_container" style="width: 90%; height: 5px;">
                <div id="progress_report_bar" style="background-color: blue; width: 0; height: 100%;"></div>
            </div>
        </div>
        <script type="text/javascript">
            $(function() {
                $("#upload_field").html5_upload({
                    url: function(number) {
                        return prompt(number + " url", "/");
                    },
                    sendBoundary: window.FormData || $.browser.mozilla,
                    onStart: function(event, total) {
                        return true;
                        return confirm("You are trying to upload " + total + " files. Are you sure?");
                    },
                    onProgress: function(event, progress, name, number, total) {
                        console.log(progress, number);
                    },
                    setName: function(text) {
                        $("#progress_report_name").text(text);
                    },
                    setStatus: function(text) {
                        $("#progress_report_status").text(text);
                    },
                    setProgress: function(val) {
                        $("#progress_report_bar").css('width', Math.ceil(val*100)+"%");
                    },
                    onFinishOne: function(event, response, name, number, total) {
                        //alert(response);
                    },
                    onError: function(event, name, error) {
                        alert('error while uploading file ' + name);
                    }
                });
            });
        </script>
    </body>
</html>

jsbin.eKubOGE.js

(function($) {
    jQuery.fn.html5_upload = function(options) {
        function get_file_name(file) {
            return file.name || file.fileName;
        }
        function get_file_size(file) {
            return file.size || file.fileSize;
        }
        var available_events = ['onStart', 'onStartOne', 'onProgress', 'onFinishOne', 'onFinish', 'onError'];
        var options = jQuery.extend({
            onStart: function(event, total) {
                return true;
            },
            onStartOne: function(event, name, number, total) {
                return true;
            },
            onProgress: function(event, progress, name, number, total) {
            },
            onFinishOne: function(event, response, name, number, total) {
            },
            onFinish: function(event, total) {
            },
            onError: function(event, name, error) {
            },
            onBrowserIncompatible: function() {
                alert("Sorry, but your browser is incompatible with uploading files using HTML5 (at least, with current preferences.\n Please install the latest version of Firefox, Safari or Chrome");
            },
            autostart: true,
            autoclear: true,
            stopOnFirstError: false,
            sendBoundary: false,
            fieldName: 'user_file[]',//ignore if sendBoundary is false
            extraFields: {}, // extra fields to send with file upload request (HTML5 only)
            method: 'post',

            STATUSES: {
                'STARTED'   : 'Started',
                'PROGRESS'  : 'Progress',
                'LOADED'    : 'Loaded',
                'FINISHED'  : 'Finished'
            },
            headers: {
                "Cache-Control":"no-cache",
                "X-Requested-With":"XMLHttpRequest",
                "X-File-Name": function(file){return get_file_name(file)},
                "X-File-Size": function(file){return get_file_size(file)},
                "X-CSRF-Token": $('meta[name="csrf-token"]').attr("content"),
                "Content-Type": function(file){
                    if (!options.sendBoundary) return 'multipart/form-data';
                    return false;
                }
            },


            setName: function(text) {},
            setStatus: function(text) {},
            setProgress: function(value) {},

            genName: function(file, number, total) {
                return file + "(" + (number+1) + " из " + total + ")";
            },
            genStatus: function(progress, finished) {
                if (finished) {
                    return options.STATUSES['FINISHED'];
                }
                if (progress == 0) {
                    return options.STATUSES['STARTED'];
                }
                else if (progress == 1) {
                    return options.STATUSES['LOADED'];
                }
                else {
                    return options.STATUSES['PROGRESS'];
                }
            },
            genProgress: function(loaded, total) {
                return loaded / total;
            }
        }, options);

        function upload() {
            var files = this.files;
            var total = files.length;
            var $this = $(this);
            if (!$this.triggerHandler('html5_upload.onStart', [total])) {
                return false;
            }
            this.disabled = true;
            var uploaded = 0;
            var xhr = this.html5_upload['xhr'];
            this.html5_upload['continue_after_abort'] = true;
            function upload_file(number) {
                if (number == total) {
                    $this.triggerHandler('html5_upload.onFinish', [total]);
                    options.setStatus(options.genStatus(1, true));
                    $this.attr("disabled", false);
                    if (options.autoclear) {
                        $this.val("");
                    }
                    return;
                }
                var file = files[number];
                if (!$this.triggerHandler('html5_upload.onStartOne', [get_file_name(file), number, total])) {
                    return upload_file(number+1);
                }
                options.setStatus(options.genStatus(0));
                options.setName(options.genName(get_file_name(file), number, total));
                options.setProgress(options.genProgress(0, get_file_size(file)));
                xhr.upload['onprogress'] = function(rpe) {
                    $this.triggerHandler('html5_upload.onProgress', [rpe.loaded / rpe.total, get_file_name(file), number, total]);
                    options.setStatus(options.genStatus(rpe.loaded / rpe.total));
                    options.setProgress(options.genProgress(rpe.loaded, rpe.total));
                };
                xhr.onload = function(load) {
                    if (xhr.status != 200) {
                        $this.triggerHandler('html5_upload.onError', [get_file_name(file), load]);
                        if (!options.stopOnFirstError) {
                            upload_file(number+1);
                        }
                    }
                    else {
                        $this.triggerHandler('html5_upload.onFinishOne', [xhr.responseText, get_file_name(file), number, total]);
                        options.setStatus(options.genStatus(1, true));
                        options.setProgress(options.genProgress(get_file_size(file), get_file_size(file)));
                        upload_file(number+1);
                    }
                };
                xhr.onabort = function() {
                    if ($this[0].html5_upload['continue_after_abort']) {
                        upload_file(number+1);
                    }
                    else {
                        $this.attr("disabled", false);
                        if (options.autoclear) {
                            $this.val("");
                        }
                    }
                };
                xhr.onerror = function(e) {
                    $this.triggerHandler('html5_upload.onError', [get_file_name(file), e]);
                    if (!options.stopOnFirstError) {
                        upload_file(number+1);
                    }
                };
                xhr.open(options.method, typeof(options.url) == "function" ? options.url(number) : options.url, true);
                $.each(options.headers,function(key,val){
                    val = typeof(val) == "function" ? val(file) : val; // resolve value
                    if (val === false) return true; // if resolved value is boolean false, do not send this header
                    xhr.setRequestHeader(key, val);
                });

                if (!options.sendBoundary) {
                    xhr.send(file);
                }
                else {
                    if (window.FormData) {//Many thanks to scottt.tw
                        var f = new FormData();
                        f.append(typeof(options.fieldName) == "function" ? options.fieldName() : options.fieldName, file);
                        $.each(options.extraFields, function(key, val){
                            f.append(key, val);
                        });
                        xhr.send(f);
                    }
                    else if (file.getAsBinary) {//Thanks to jm.schelcher
                        var boundary = '------multipartformboundary' + (new Date).getTime();
                        var dashdash = '--';
                        var crlf     = '\r\n';

                        /* Build RFC2388 string. */
                        var builder = '';

                        builder += dashdash;
                        builder += boundary;
                        builder += crlf;

                        builder += 'Content-Disposition: form-data; name="'+(typeof(options.fieldName) == "function" ? options.fieldName() : options.fieldName)+'"';

                        //thanks to oyejo...@gmail.com for this fix
                        fileName = unescape(encodeURIComponent(get_file_name(file))); //encode_utf8

                        builder += '; filename="' + fileName + '"';
                        builder += crlf;

                        builder += 'Content-Type: ' + file.type;
                        builder += crlf;
                        builder += crlf;

                        /* Append binary data. */
                        builder += file.getAsBinary();
                        builder += crlf;

                        /* Write boundary. */
                        builder += dashdash;
                        builder += boundary;
                        builder += dashdash;
                        builder += crlf;

                        xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
                        xhr.sendAsBinary(builder);
                    }
                    else {
                        options.onBrowserIncompatible();
                    }
                }
            }
            upload_file(0);
            return true;
        }

        try {
            return this.each(function() {
                this.html5_upload = {
                    xhr:                    new XMLHttpRequest(),
                    continue_after_abort:    true
                };
                if (options.autostart) {
                    $(this).bind('change', upload);
                }
                for (event in available_events) {
                    if (options[available_events[event]]) {
                        $(this).bind("html5_upload."+available_events[event], options[available_events[event]]);
                    }
                }
                $(this)
                    .bind('html5_upload.start', upload)
                    .bind('html5_upload.cancelOne', function() {
                        this.html5_upload['xhr'].abort();
                    })
                    .bind('html5_upload.cancelAll', function() {
                        this.html5_upload['continue_after_abort'] = false;
                        this.html5_upload['xhr'].abort();
                    })
                    .bind('html5_upload.destroy', function() {
                        this.html5_upload['continue_after_abort'] = false;
                        this.xhr.abort();
                        delete this.html5_upload;
                        $(this).unbind('html5_upload.*').unbind('change', upload);
                    });
            });
        }
        catch (ex) {
            options.onBrowserIncompatible();
            return false;
        }
    };
})(jQuery);