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

12
AD
На сайте с 30.12.2011
Offline
73
467

Куча примеров в интернете про прогресс-бар 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 мб фото он практически мгновенно и одномоментно.

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

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

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

L
На сайте с 22.11.2013
Offline
94
#1
Сколько ждать пользователю пока сервер ответит?

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

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

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

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

AD
На сайте с 30.12.2011
Offline
73
#2

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

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

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

L
На сайте с 22.11.2013
Offline
94
#3

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

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

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

AD
На сайте с 30.12.2011
Offline
73
#4

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

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

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

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

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

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

D
На сайте с 18.12.2015
Offline
142
#5

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

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

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

Разработка и поддержка высоконагруженных проектов.
AD
На сайте с 30.12.2011
Offline
73
#6
AlenDelan, если в хроме троттлинг скорости включить, тоже быстро пишет что загрузилось?

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

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

LEOnidUKG
На сайте с 25.11.2006
Offline
1554
#7
- жду секунд 10 пока от сервера придет ответ, что файл получен и все ок (меньше файл по весу - жду меньше, больше файл по весу - жду больше).

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

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

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

✅ Трастовых площадок под размещение статей и ссылок. Опыт 12 лет! ( https://searchengines.guru/ru/forum/675690 ) ⭐ Купить вечные трастовые ссылки для сайта ( https://getmanylinks.ru/?srh ) ⭐ Ускорение ваших сайтов (WP, Opencart и др.) + Настройка сервера ( https://searchengines.guru/ru/forum/997205 )
AD
На сайте с 30.12.2011
Offline
73
#8
LEOnidUKG:
Тут например есть более расширенный пример:
http://know-online.com/post/javascript-indikator-zagruzki-faila

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

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

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

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

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

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

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

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

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

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий