Мониторинг прогресса в синхронных вызовах XMLHttpRequest

Question

На клиентской стороне у меня есть File-Dropzone (HTML5 File-API), где пользователь может удалить несколько файлов, которые должны быть загружены на сервер. Для каждого файла создается новый объект XMLHttpRequest, и файл отправляется на сервер асинхронно. Я наблюдаю за ходом процесса с помощью прослушивателя событий progress для объекта xhr.upload.

Проблема в том, что на данный момент серверная сторона должна получать файлы синхронно, потому что на сервере происходят некоторые вычисления, которые должны выполняться один файл за другим, и, к сожалению, я не могу изменить эту реализацию. Но если я установлю объект xhr для синхронной отправки файлов, функция, которую я зарегистрировал с событием progress , больше не будет срабатывать, поэтому я не смогу следить за прогрессом.

Может кто-нибудь помочь с этим? (Если есть решение, использующее встроенную функциональность jQuery , я также могу использовать это).

Вот важная часть кода, который я сейчас использую:

for (var i = 0; i < files.length; i++) {
           var file = files[i];                              

           var xhr;
           if (window.XMLHttpRequest)
              xhr=new XMLHttpRequest();
           else
              xhr=new ActiveXObject("Microsoft.XMLHTTP");

           xhr.upload.addEventListener('progress',function(ev){
               var percent = Math.round((ev.loaded/ev.total) * 100);                                       
               console.log(i + " : " + percent + "%");                                     
               progress.style.width = percent +'%';   
               if(progressHtml)
                   progressHtml.innerHTML = i + "/" + files.length + " : " + percent + "%";
            }, false);

            xhr.open("post", "/servlet/de.test.UploadDropServ", false); //synchronous                                    
            xhr.setRequestHeader("Filename", file.name);
            xhr.setRequestHeader("UniFilename", file.name);            
            xhr.send(file);          

            xhr.addEventListener("load", function () {                    
                progress.style.width = "100%";                                      
            }, false);                                                                                               
         }
     }     

Answer 1

Итак, проблема в том, что вы НЕ хотите, чтобы он был асинхронным.

Когда вы устанавливаете запрос синхронным, JavaScript будет ждать, пока он не будет завершен, прежде чем делать что-либо еще, включая обратный вызов хода выполнения.

Если вы хотите, чтобы обратный вызов прогресса работал, он должен быть асинхронным. Для этого у вас есть два решения:

1: Если на стороне сервера установлен PHP, запустите сеанс, но НЕ закрывайте его, и он будет синхронным.

2: На стороне клиента создайте стопку файлов для загрузки и выгрузки по одному, вызывая следующий при обратном вызове «Complete» предыдущего.