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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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