Загрузка файла HTML5 с несколькими индикаторами выполнения

Я загружаю несколько файлов через XmlHTTPRequest и HTML5. У меня загрузка работает нормально, но я хотел бы иметь индикатор выполнения для каждой загрузки файла. Однако код, который у меня есть, использует последний индикатор выполнения для ВСЕХ загрузок файлов, а не для каждой загрузки с использованием собственного индикатора выполнения. Так что это в основном визуально на стороне клиента, но меня это действительно раздражает. По какой-то причине я предполагаю, что событие, которое прикрепляет ход загрузки файла, перезаписывает себя и использует последний индикатор выполнения. Вот мой код:

var files = event.dataTransfer.files;

    // iterate over each file to upload, send a request, and attach progress event
    for (var i = 0, file; file = files[i]; i++) {
        var li = $("<li>" + file.name + "<div class='progressbar'></div></li>");

        // add the LI to the list of uploading files
        $("#uploads").append(li);

        // fade in the LI instead of just showing it
        li.hide().fadeIn();

        var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener('progress', function(e) {
                var percent = parseInt(e.loaded / e.total * 100);
                li.find(".progressbar").width(percent);
            }, false);

            // check when the upload is finished
            xhr.onreadystatechange = stateChange;

            // setup and send the file
            xhr.open('POST', '/attachments', true);
            xhr.setRequestHeader('X-FILE-NAME', file.name);
            xhr.send(file);
        }

Я предполагаю, что правильное "li" не читается должным образом событием "progress". Я подозреваю, что есть какая-то привязка, которую я должен сделать, чтобы сообщить событию "progress" использовать конкретную переменную, такую ​​как "li", но я не уверен, что мне не хватает.