juppy

by secretgspot

HTML

<h1>juppy</h1>
<h2>a jQuery HTML5 uploader</h2>

<form id="upload" action="/echo/json/" method="post">
    <input type="file" multiple="true" />
    <input class="start" type="button" value="" />
    <ul class="list"></ul>
</form>

CSS

body, html {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

h1, h2 { font-family: Garamond; }

h1 {
    font-size: 2.5em;
    line-height: 1.3;
    margin-bottom: .3em;
}

h2 {
    line-height: 1.5;
    margin-bottom: .5em;
}

.list {
    margin-top: 1em;
}

.file {
    padding: 10px;
    border: 1px solid #eee;
    margin-bottom: 1em;
}

.file.uploading {
    border-color: orange;
}

.file.done {
    border-color: green;
}

.file.error .tools,
.file.aborted .tools {
    color: red;
}

.file.error {
    border-color: red;
}

.file .num {
    padding-right: 5px;
}

.file .name {
    padding-right: 5px;
}

.file .progress {
    position: relative;
    margin: 5px 0;
    height: 10px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    
    background: -moz-linear-gradient(top, rgba(214,214,214,0.07) 0%, rgba(112,112,112,0.11) 50%, rgba(0,0,0,0.11) 51%, rgba(204,204,204,0.15) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,214,214,0.07)), color-stop(50%,rgba(112,112,112,0.11)), color-stop(51%,rgba(0,0,0,0.11)), color-stop(100%,rgba(204,204,204,0.15))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(214,214,214,0.07) 0%,rgba(112,112,112,0.11) 50%,rgba(0,0,0,0.11) 51%,rgba(204,204,204,0.15) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(214,214,214,0.07) 0%,rgba(112,112,112,0.11) 50%,rgba(0,0,0,0.11) 51%,rgba(204,204,204,0.15) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(214,214,214,0.07) 0%,rgba(112,112,112,0.11) 50%,rgba(0,0,0,0.11) 51%,rgba(204,204,204,0.15) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12d6d6d6', endColorstr='#26cccccc',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, rgba(214,214,214,0.07) 0%,rgba(112,112,112,0.11)...

JavaScript

(function($) {

    var defaults = {
        // options
        dragdrop: true,
        multipart: false,
        accept: "",
        autostart: false,
        thumbs: false,
        locale: "en-US",
        startOnSubmit: true,

        // elements
        form: null,
        start: null,
        choose: null,
        list: null,
        file:
            '<li class="file">'+
            '<span class="speed"></span>'+
            '<div class="tools"><a class="remove" href="#">%locale.remove%</a></div>'+
            '<span class="num">%num%.</span>'+
            '<span class="name">%filename%</span>'+
            '<span class="size">(%size%)</span>'+
            '<div class="thumb" style="display: none;"><img src="" alt="" /></div>'+
            '<div class="progress"><div class="bar" style="display: none;"></div></div>'+
            '</li>',

        // events
        onInit: function(){},
        onError: function(){},
        onStart: function(){},
        onAbort: function(){},
        onTimeout: function(){},
        onProgress: function(){},
        onSuccess: function(){},
        onComplete: function(){},
        onFileAdd: function(){},
        onFileRemove: function(){},
    };
    
    var imgFilter = /^(image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i;

    function bytesToSize(bytes) {
        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        if (bytes == 0) return 'n/a';
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
        return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
    };

    $.fn.juppy = function(options) {
        options = $.extend({}, defaults, options);
        var locale =...