[Gozar]

http://learn.javascript.ru/play/qXwXEb или http://jsfiddle.net/2HKCX/5/

В общем поспорили мы с nerv, можно ли написать нормальный загрузчик файлов в 30 строк, с drug&drop, % загрузки, удалением из списка выбранных файлов. В общем человеческий.

Я считаю, что я вполне себе справился, nerv насколько я понял считает что спор я проиграл и нужно использовать обязательно доп. либу аля ангуляр обязательно.

Небольшая оговорка: в первоначальном споре должна была еще быть загрузка для старых ослов в iframe. Я не стал ее пихать ибо не продакшн и по сути это к спору имеет мало отношения, но в случае чего можно выровнять листнеры и впихнуть костыль в код.

В общем-то зашли мы в конце концов в тупик, nerv считает код не читабельным, я думаю что 30 строк помещающихся на экране вполне можно считать. Также он считает что у меня обфускация, а я считаю что это удачный сахар.

Если я в чем-то ошибся - nerv поправь меня.

Что скажите? Я думаю такой код с небольшими допилками вполне себе может существовать.

Ну и сам код(js only):

var d=document, q='querySelector', on='addEventListener', f=d[q]('#f'), list=d[q]('#list'), 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]);
            list.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 = ''; });
    list[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();}
    list[on]('dragenter', drag, false);
    list[on]('dragover', drag, false);
    list[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) ? list.innerHTML = 'загружено: ' + Math.floor((e.loaded * 100) / e.total) + '%' : 'файлы загружены'}, false);
        request.onload = function () { list.innerHTML = 'файлы загружены'; }
        request.open("POST", "./post.php", true);
        request.send(form);
    });