Реальное отображение upload файла (javascript)


AlenDelan
488

Куча примеров в интернете про прогресс-бар upload файла, но реальной картины пользователю такой скрипт не даст, итак, примерный скрипт из интернета:

есть форма с <input type=»file»>

// по событию submit передаем файл из инпута в нашу функцию
function upload(file) {
const xhr = new XMLHttpRequest();

// по событию progress логаем байты
xhr.upload.onprogress = function(event) {
console.log(‘Отправлено на сервер’ + event.loaded + ‘ байт из ‘ + event.total );
}

// настройка
xhr.open(‘POST’, ‘upload.php’);

// пристраиваем отправляемый файл
const formData = new FormData();
formData.append(‘userfile’, file);

// отправка
xhr.send(formData);
}

Протестировав это становится понятно, что этот скрипт отобразит только отправку браузером, а отправляет все 5 мб фото он практически мгновенно и одномоментно.

То есть реальной картины пользователю, сколько ждать пока сервер получит данные и ответит, этот скрипт не даст.

А остальное реальное время отправки файла (по проводам наверное) до ответа сервера как прикинуть? Сколько ждать пользователю пока сервер ответит? Как делается прогресс-бар, который отобразит реальное приблизительное время ожидания?

Не знаю даже как сформулировать для гугла вопрос, подскажите куда рыть). Спасибо.


lutskboy

Сколько ждать пользователю пока сервер ответит?

зависит от вашего скрипта обработчика

обычно он с картинки уменьшенные копии делает и мб вставляет в бд запись

а ето доли секунд.

что тут ждать то


AlenDelan

да, вот именно, скрипт-обработчик на сервере тоже работает доли секунд,

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

То есть, еще раз, нажимаем submit, объект xhr со всеми его событиями при аплоад отрабатывает практически мгновенно (все, xhr сказал что он все байты отправил), потом ждем секунд 10-15-20 (когда файл большой, мегабайт 5 к примеру) и потом уже приходит коротенький ответ сервера что все ок, файл получен. То есть вот эти 10-15-20 секунд и есть реальное время ожидания при аплоад и непонятно как их измерить-прикинуть. И как строить прогресс-бар, на основании чего, ведь xhr все отправляемые байты уже выплюнул до начала этих 10-15-20 секунд.


lutskboy

если у вас ничего там на сервере не делается то 10-15-20 секунд не должно быть

а если так то когда файл загружен можно вывести гифку или надпись типа

файл успешно загружен на сервер. идет его обработка…


AlenDelan

да ничего на самом сервере не делается 10-15-20 секунд, там файл обрабатывается мгновенно.

Но реально, временная схема выглядит так, еще раз:

— делаю по кнопке отправку формы с файлом (фото 3 мб например);

— тут же, мгновенно, объект xhr сообщает в консоли что он выплюнул все 3 мб из 3 мб;

— жду секунд 10 пока от сервера придет ответ, что файл получен и все ок (меньше файл по весу — жду меньше, больше файл по весу — жду больше).

… не смогу поверить что у вас файл 3 мб даже при очень хорошем интернете отправится за секунду,


danforth

Ну тут два пути, либо симулировать загрузку, двигая прогресс бар. Например, тот же YouTube так делает, ползунок ползет по таймеру, а не по результатам загрузки или ответу от сервера. Если задача «долгоиграющая», например выгрузка какая-то, можно сделать отдельный URL и UUID у задачи, по урлу можно получить current, total, percent, а на фронте рисовать прогресс на основании того, сколько бекенд уже обработал. То что у вас сервер 20 секунд что-то делает, фронтенд никак не узнает о том, сколько ещё осталось, если вы не научите фронтенд узнавать это отдельно, делая запросы.

———- Добавлено 30.03.2020 в 19:00 ———-

AlenDelan, если в хроме троттлинг скорости включить, тоже быстро пишет что загрузилось?

Реальное отображение upload файла (javascript)


AlenDelan

AlenDelan, если в хроме троттлинг скорости включить, тоже быстро пишет что загрузилось?

делал я эту штуку, переключал на симуляцию 3G, байты ползут медленно и красиво, (то есть прогресс-бар можно строить) …

о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?


LEOnidUKG

— жду секунд 10 пока от сервера придет ответ, что файл получен и все ок (меньше файл по весу — жду меньше, больше файл по весу — жду больше).

Чудеса. Что-то у вас не так работает.

Тут например есть более расширенный пример:

http://know-online.com/post/javascript-indikator-zagruzki-faila


AlenDelan

LEOnidUKG:
Тут например есть более расширенный пример:

http://know-online.com/post/javascript-indikator-zagruzki-faila

в этом примере ничего нового нет, просто рюшечки добавлены, а суть та же

———- Добавлено 30.03.2020 в 22:31 ———-

AlenDelan:
делал я эту штуку, переключал на симуляцию 3G, байты ползут медленно и красиво, (то есть прогресс-бар можно строить) …

о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?

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


danforth

AlenDelan:
о, и вот сейчас увидел (потестил еще раз), что когда отправлены все байты в таком режиме, то ответ сервера приходит мгновенно после отправки последних байтов, то есть, что делать? какая-то настройка для xhr есть?

А что с файлами делается? И что за бекенд у вас? Если nginx — то он сначала буферизирует запрос, затем передает его на php. Если что-то другое, то может быть потоковая обработка: пока файлы шлются (медленно), они обрабатываются (тоже медленно), и в итоге последняя долетевшая пачка байтов быстро обрабатывается, и отдается ответ.


AlenDelan

danforth:
Ну тут два пути, либо симулировать загрузку, двигая прогресс бар. Например, тот же YouTube так делает, ползунок ползет по таймеру, а не по результатам загрузки или ответу от сервера.

начинаю думать что на всех реальных проектах сделана именно такая тупая симуляция… что вот-вот «щас все будет».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *