XHR onProgress завершен

Question

Я пытаюсь реализовать метку с процентом загрузки с помощью ajax. Проблема в том, что после того, как xhr вернул 100%, это все равно занимает около 17 секунд, пока не будут готовы ReadyState == 4 и status == 200.

Я посылаю изображение (PNG/JPG) и строки с помощью FormData() объекта

<form onclick='send(this)'.... 

и функция:

function send(form){ var f = new FormData(form)....... 

Я использую следующий код для загрузки

if(xhr.upload) { 
    xhr.upload.onprogress = function(e) { 
     if (e.lengthComputable) { 
      var perc = Math.round((e.loaded/e.total) * 100); 
      var state = { 
       'done': e.loaded, 
       'total': e.total, 
       'percent': perc 
      }; 
      progress(state); 
     } 
    }; 
} 

Answer 1

Это, скорее всего, проблема с вашим сервером, а не с вашим клиентским кодом. Обработчик onreadystatechange будет вызываться с readyState значением 4 только после того, как сервер вернет ответ на базовый запрос. Загруженные/итоговые значения, переданные в ваш обработчик onprogress, указывают количество байтов, отправленных на сервер. Если Total === загружен, это не обязательно означает, что сервер вернул ответ. Сервер может выполнить некоторую обработку после получения последнего байта, а затем вернуть ответ (запуск вашего обработчика onreadstatechange). Если вы заметили длительный период времени между отправкой последнего байта и вызовом обработчика , это указывает на то, что ваш сервер по какой-то причине не требует ответа на запрос.