Jquery ajax – How to get the file uploading progress status in ajax call?

I am uploading the multiple files through ajax, where i need to keep a progress bar. I am able to get the progress complete status only after all the process done, so i need to keep the progress bar showing status during upload.

Here when I clicking the ‘btnEditImageSave’ button, I am checking whether the existing file is getting delete and uploading in if condition.
In that storing the uploading file and passing it for uploading process in ajax complete function. In it that i have included the progress bar code to show the progress status, but its showing only after the all the process completes.

$('#btnEditImageSave').unbind().click(function (event) {
        $('#progressBardiv').css('width', '0');
        $('.progressBardiv').text('');  
 if (uploadedfiles.length > 0 && deleteFiles.length == 0) {
                if (editStoredFiles.length > 0) {
                    var files = new FormData();
                    for (var i = 0; i < editStoredFiles.length; i++) {
                        if (editStoredFiles[i].size > 0) {
                            files.append(editStoredFiles[i].name, editStoredFiles[i]);
                        }
                    }
                    uploadedfiles = [];
                    files.append('SerialNumber', editSerialNumber);
                  $.ajax({
                        type: "POST",
                        url: productionBaseUrl + '/Home/UploadDockingStationFiles',
                        data: files,
                        contentType: false,
                        processData: false,
                      async: true,

                      complete: function () {
                          uploadedfiles = [];
                          $('#editfileupload').val();
                          $.ajax({
                                type: "POST",
                                url: cloudServerUrl + "/api/dockstation/updatefiledisplaytimer",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                data: JSON.stringify({
                                    SerialNumber: $('#ddlEditDockingStationSerialNumber').val(),
                                    FileSpinTimer: $('#txtEditTimer').val(),
                                    IsHDMIUpdate: isHDMIUpdate
                                }),
                               /*----My Progress Bar code----*/
                                xhr: function () {
                                    var xhr = new window.XMLHttpRequest();
                                    xhr.upload.addEventListener("progress", function (event) {
                                        if (event.lengthComputable) {
                                            var percentComplete = event.loaded / event.total;
                                            percentComplete = parseInt(percentComplete * 100);
                                            $('#progressBardiv').text(percentComplete + '%');
                                            $('#progressBardiv').css('width', percentComplete + '%');
                                        }
                                    }, false);
                                    return xhr;
                                },
                                complete: function () {
                                    $('#loading-popup').hide();
                                    $('#divEditDockingStationImages').dialog("close");
                                    $.popup('<pre>Message</pre>', "Image Configuration Updated Successfully.", 'OK');
                                    return false;
                                }
                            });
                        }
                    });
                }
            }
            else {
                $('#loading-popup').hide();
                $.popup('<pre>Message</pre>', "Please Select a File.", 'OK');
                return false;
            }
}


    <div class="progress">
     <div id="progressBardiv" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="">
     <span class="sr-only"></span>
     </div>
     </div>