Прогресс в ajax при загрузке 2 файлов и более

Question

Привет, я пытаюсь загрузить файл 2 или более, моя проблема заключается в том, что мой индикатор выполнения скажет 100% из-за того, что сначала загружен небольшой файл, а затем возвращается к проценту большой файл. Мой вопрос: как я могу добиться такого же прогресса, если у меня будет загружено много файлов?

for (var i = 0, f; f = files.files[i]; i++) { 

$.ajax({ 

    xhr: function(){ 
     //upload Progress 
     var xhr = $.ajaxSettings.xhr(); 
     if (xhr.upload) { 
      xhr.upload.addEventListener('progress', function(event) { 
       var percent = 0; 
       var position = event.loaded || event.position; 
       var total = event.total; 
       if (event.lengthComputable) { 
        percent = Math.ceil(position/total * 100); 
       } 
       //update progressbar 
       $('.bar').width(percent + '%'); 
      }, true); 
     } 
     return xhr; 
    }, 
       url: 'https://content.dropboxapi.com/2/files/upload', 
       type: 'post', 
       data: f, 
       processData: false, 
       contentType: 'application/octet-stream', 
       headers: { 
         "Authorization": "Bearer ACCESS TOKEN", 
         "Dropbox-API-Arg": '{"path": "/'+f.name+'", "mode": "add","autorename": true,"mute": false}' 
         }, 
       success: function (data) { 
       console.log(data); 
       app.alert.show('success-message', { 
       level: 'success', 
        messages: 'your file has been upload to Dropbox', 
       autoClose: true 
        }); 
       }, 
       error: function (data) { 
       console.log(data); 
       } 
       }) 

       } 

Answer 1

Я думаю, вы должны сохранить прогресс каждого файла в другой переменной (или, может быть массив переменных) и функцию пишут, что будет обновлять ширину ProgressBar, когда этот вары изменяются.