HTML 5 File Upload / Drag & Drop (multiple) + progress

Výber elementu

$(".element").live("dragenter dragover dragexit drop", function (e) {
    switch (e.type) {
        case "dragenter":
            dragEnter(e);
            break;
        case "dragover":
            dragOver(e);
            break;
        case "dragexit":
            dragExit(e);
            break;
        case "drop":
            drop(e);
            break;
    }
});

Spracovanie udalostí a upload súborov

function dragEnter(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function dragExit(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function dragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var fd = new FormData();
    fd.append("key", "value");

    for (var i = 0; i < files.length; i++)
        fd.append("file", files[i]);

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
        var percentage = Math.round(evt.loaded * 100 / evt.total); 
        var speed = evt.transferSpeed;
        var time = evt.timeRemaining;
    }, false);
 
    // xhr.addEventListener("load", function () {  }, false);
    // xhr.addEventListener("error", function () {  }, false);
    // xhr.addEventListener("abort", function () {  }, false);
  
    xhr.open("POST", "http://mypage.com/upload/");
    xhr.send(fd);
}