Индикатор выполнения XMLHttpRequest зацикливается

Question

Я пытаюсь создать функцию загрузки с помощью перетаскивания, используя HTML, Javascript и сервлеты. Я использую XMLHttpRequest, чтобы сделать это, и я пытался добавить индикатор выполнения для каждого файла, загружаемого пользователем. Пока ошибок нет, сервлет вызывается правильно, в ответе с сервера тоже нет ошибок. Ответ XMLHttpRequest также не содержит ошибок.

Я повторяю количество файлов и создаю индикаторы выполнения для каждого файла, который вводит пользователь, это также выглядит правильно, НО при запуске индикатора выполнения, и не имеет значения, это один файл или несколько файлов, индикатор выполнения вводится в al oop, он никогда не останавливается и продолжает идти от 0% до 100% до 0%

Вот Javascript и HTML У меня так далеко. Сервлет, как я уже сказал, вызывается без ошибок, поэтому я его опущу. Я использую Wildfly как AS, и когда я отлаживаю его, файлы загружаются.

<script>
    window.onload = function() {
        var dropbox = document.getElementById("dropbox");
        dropbox.addEventListener("dragenter", noop, false);
        dropbox.addEventListener("dragexit", noop, false);
        dropbox.addEventListener("dragover", noop, false);
        dropbox.addEventListener("drop", dropUpload, false);
    }

    function noop(event) {
        event.stopPropagation();
        event.preventDefault();
    }

    function dropUpload(event) {
        noop(event);

        var files = event.dataTransfer.files;

        for (var i = 0, file; file = files[i]; i++) {
            var formData = new FormData();
            formData.append("file", file);

            var div = $('<div>' + file.name + '<progress id=progressbar' + i + ' max=100 style=width:300px;></progress></div>');
            $("#uploadsStatus").append(div);

            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
                var percent = Math.round(e.loaded * 100 / e.total);

                $("#progressbar" + i).val(percent);
            }, false);

            xhr.addEventListener("load", uploadComplete, false);
            xhr.open("POST", "UploadDeArquivosServlet", true); // If async=false, then you'll miss progress bar support.
            xhr.send(formData);
        }
    }

    function uploadComplete(event) {
        document.getElementById("status").innerHTML = event.target.responseText;
    }
</script>

<div id="dropbox">Drag and drop a file here...</div>
<div id="status"></div>
<div id="uploadsStatus"></div>

Вот некоторые распечатки проблемы, где индикатор выполнения входит в l oop. При использовании firebug ошибок javascript нет, и значения индикаторов не меняются, даже если это один или несколько индикаторов.

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

Некоторая помощь или идеи были бы великолепны, с уважением!