Разное поведение браузеров при загрузке файлов через XMLHttpRequest. Как избежать моментальной псевдо 100% загрузки файла?

Question

[Дмитрий Сергеев]

Проблема в основном касается только Firefox (54.0.1) и заключается оно в том, что при биндинге на "progress" объекта XHR, event.loaded сразу же равен event.total и поэтому прогресс бар получается 100% но загрузка файла всё ещё идет (например, если медленное соединение или сервер затупил) . Методом тыка выяснил, что такое происходит если размер файла меньше 556397 байт. Для справки, Chrome начинает так же себя вести с файлами меньше 100 кб. IE 11 всегда сначала отправляет кусочек чуть меньше 1 кб и потом сразу начинает пулят по ~300 кб.

Как добиться плавной загрузки файла? Тот же vk.com плавно те же самые файлы загружает.

Comments

[kulaeff]

А как вы проверяете, что загрузка все еще идет?

[ThunderCat]

нашел похожие вопросы на со, ответов пока никто не дал, еще есть пару вопросов в ветке гитхаба к либе какой-то, но вроде там проблему тоже до конца не решили..
На всякий случай что нарыл:
https://github.com/danialfarid/ng-file-upload/issu...
https://github.com/danialfarid/ng-file-upload/issu...

[Yustas Alexu]

Это пробовали использовать https://developer.mozilla.org/en-US/docs/Web/API/X... ?

Answer 1

[Kovalsky]

Илья Кантор советует использовать xhr.upload для этого:

xhr.upload.onprogress = function(event) {
  alert( 'Загружено на сервер ' + event.loaded + ' байт из ' + event.total );
}

xhr.upload.onload = function() {
  alert( 'Данные полностью загружены на сервер!' );
}

xhr.upload.onerror = function() {
  alert( 'Произошла ошибка при загрузке данных на сервер!' );
}

А если вы пользуетесь xhr.onprogress, то вы банально не в ту сторону смотрите, xhr.onprogress следит за скачиванием.