jQuery Ajax странное поведение индикатора выполнения загрузки файла

Question

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

var files;
var filesList = [];
var uploadFiles = document.getElementById("fileUpload");
var selectedFamily = family = $("#FamilySelect").find(":selected").val();
var notes = family = $("#noteArea").val();
uploadFiles.addEventListener('submit', function (evt) {
    evt.preventDefault();

    for (var i = 0; i < files.length; i++) {
        var fd = new FormData()
        fd.append("file", files[i]);
        fd.append("family", selectedFamily);
        fd.append("note", notes);
        uploadFile(fd, i);
    };
});
//Progress bars generation.
function uploadFile(fd, i) {
    var ajax = $.ajax({
        url: '@Url.Action("Save","Ori")',   //CONTROLLER
        type: 'POST',
        data: fd,
        processData: false, //Bypasso il comportamento standard del form upload.
        contentType: false, //Bypasso il comportamento standard del form upload.
        xhr: function () {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                //Progress event listener.
                xhr.upload.addEventListener("progress", function (progress) {
                    var total = (progress.loaded / progress.total) * 100;
                    console.log(i + "/" + total);
                    //Attach the value to the right progressbar
                    $("#file" + i).attr('aria-valuenow', total).css('width', total + '%');
                }, false);

           //Upload success
           xhr.addEventListener("loadend", function () {
               $("#file" + i).addClass("progress-bar-success");
            }, false);

            //Error
            xhr.addEventListener("error", function () {
                $("#file" + i).addClass("progress-bar-error");
            }, false);

            //Timeout
            xhr.addEventListener("timeout", function (progress) {
                $("#file" + i).addClass("progress-bar-error");
            }, false);
        }
        return xhr;
    }
});
}

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

    files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes <div class="progress"><div id="file', i,'" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"><span class="sr-only">45% Complete</span></div></div></li>');
        filesList.push(f);
        var reader = new FileReader();

        reader.onloadend = function (evt) {
            if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                console.log(md5(evt.target.result))
            }
        };
        reader.readAsBinaryString(f);
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

Это мой контроллер в MVC

public ActionResult Save(HttpPostedFileBase file, string family, string note)
{

    ...
    ...
    return Json("OK");
}

Я опубликовал только объявление метода и результат, потому что я думаю, что это не имеет отношения к моей проблеме. Кажется, все в порядке, но у меня очень странное поведение в отношении значения прогресса каждого индикатора выполнения, я отправлю GIF, чтобы точно показать, что происходит, поскольку я не могу опубликовать console.log, потому что это будет очень долго и непонятно читать.

Надеюсь, кто-нибудь может указать мне правильное направление.