Загрузчик файлов

by Vladimir

HTML

<input type="file" multiple="multiple" id="f">
<div class="list" id="l">кидай сюда файлы</div>
<div class="upload" id="upload">upload</div>

CSS

div {
            font: 15px "Arial";
            height: 20px;
            width: 100px;
            display: table;
            color: #fff;
        }
        .list {
            background: linear-gradient(to bottom, #fafafa 0%, #dedede 100%);
            border-radius:5px;
            min-height: 100px;
            min-width: 500px;
            border: 1px solid #e1e1e8;
            color: #41464D;
            font-style: italic;
        }
        .item {
            color: #41464D;
            font: 12px "Arial";
            font-style: italic;
            width: 100%;
            margin: 2px;
        }
        .del {
            background: linear-gradient(to bottom, #701010 0%, #7d1414 100%);
            border-radius:5px;
            float: right;
            text-align: center;
            cursor: pointer;
        }
        .upload {
            background: linear-gradient(to bottom, #396013 0%, #4d851b 100%);
            border-radius: 5px;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            opacity: 0.7;
            cursor: pointer;
        }
        .upload:hover {
            opacity: 1;
        }

JavaScript

var d=document, q='querySelector', on='addEventListener', f=d[q]('#f'), l=d[q]('#l'), upload=d[q]('#upload'), files=[], form = new FormData(), request = new XMLHttpRequest();

    function add (f) {
        for(var i = 0; i < f.length; i += 1) {
            files.push(f[i]);
            l.insertAdjacentHTML('beforeend', '<div class="item">'+f[i].name+', size: '+f[i].size+'<div class="del" data-i="'+i+'">delete</div></div>');
        }
    }
    f[on]('change', function(e) { add(e.target.files); f.value = ''; });
    l[on]('click', function (e) {
        var t = e.target;
        if (t.className == 'del') {
            files.splice(t.getAttribute('data-i'),1);
            t.parentNode.parentNode.removeChild(t.parentNode);
        }
    });
    function drag (e) {  e.stopPropagation();  e.preventDefault();}
    l[on]('dragenter', drag, false);
    l[on]('dragover', drag, false);
    l[on]('drop', function (e) { add(e.dataTransfer.files); f.value = ''; drag(e); }, false);

    upload[on]('click', function () {
        for(var i = 0; i < files.length; i += 1) {
            form.append("photo[]", files[i], files[i].name);
        }
        request.upload[on]('progress', function(e){ (e.lengthComputable) ? l.innerHTML = 'загружено: ' + Math.floor((e.loaded * 100) / e.total) + '%' : 'файлы загружены'}, false);
        request.onload = function () { l.innerHTML = 'файлы загружены'; }
        request.open("POST", "./post.php", true);
        request.send(form);
    });