Как вообще сервер смог рассчитать загрузку файла (прелоадер)?

Question

[Genri_Rus]

Вот пример: vintagetechnics.ru/comment

При прикреплении фото появляется прелоадер и он рассчитывается в % после ответа сервера:




Видео примеры: https://recordit.co/nYepKXBJly | https://recordit.co/tlMiAYHDvb

spoiler

P.S. Поставьте в network slow 3G и посмотрите, что ответ сервера всегда совпадает с концом прелоадера

Comments

[Ярослав Иванов]

xmlhttprequest upload progress

[Пашенька]

Блен, сидел оттирал экран iMac, а это точки на скриншотах... Да вы, автор, – прункер.

[Genri_Rus]

Ярослав Иванов, вы внимательно посмотрите, upload progress работает только в начале, а тут прелоадер зависит от ответа сервера

[Genri_Rus]

Пашенька, )

[Genri_Rus]

Пашенька, а ваше мнение я не прочитал )

[Genri_Rus]

Ярослав Иванов, вы смотрели в slow 3G ? Сейчас покажу, вот в конце видно: https://recordit.co/tlMiAYHDvb

[Пашенька]

Genri_Rus, там не сервер рассчитывает, а клиент, можно загрузку навесить сразу на событие как будут выбраны картинки - onchange. О том, как отслеживать прогресс, описано здесь.
Чтобы сервер рассчитывал, с ним должен быть постоянный коннект типо wss.

[Genri_Rus]

Пашенька, как это не сервер, а почему тогда 100% у прелоадера всегда зависит от ответа сервера ?

[Genri_Rus]

Пашенька, xhr.upload загружает файл всегда в начале, а потом только ответ от сервера (но не сразу)
Скорость при xhr.upload мгновенная, а тут скорость загрузки прелоадера зависит от ответа сервера

[Пашенька]

Genri_Rus, вот так это. xhr.onprogress – и есть прогресс загрузки файла на сервер. Файл отправляется в обработчик по роуту /storage/upload/comment, но загружается на сервер он не мгновенно, потому что он имеет некоторый размер. В это время многократно стреляет событие onprogress, именно в этом событии и происходит рисование прелоадера на основании таких свойств как event.loaded и event.total.
Всё это происходит на клиентской стороне.
Когда event.loaded достигнет event.total + некоторое время на работу серверной стороны, отправленный запрос в /storage/upload/comment вернётся с кодом 200 в случае успеха. Всё, вот весь цикл.

[Genri_Rus]

Пашенька,

В это время многократно стреляет событие onprogress, именно в этом событии и происходит рисование прелоадера на основании таких свойств как event.loaded и event.total.

Объясните мне тогда, как оно может многократно стрелять если файл загружается мгновенно ?

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

А это событие происходит вместе с success'ом:

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

Т.е. человек добавил картинку, она мгновенно на клиенте загрузилась:
event.loaded/event.total * 100 + '%' = 100%, а что тогда прелоадер тоже 100% будет ?
Ведь загрузка при событии upload.onprogress мгновенная

Был бы благодарен за это разъяснение

[Пашенька]

Genri_Rus, то, что картинка мгновенно появляется после её выбора никак не связано с загрузкой картинки на сервер. и событие onprogress здесь ни при чём. Эта картинка в оперативной памяти. А уже после этого начинается загрузка картинки на сервер и вот тут уже работает onprogress, вот тут и рисуется прелоадер и она нифига не мгновенная, здесь происходит именно тот прогресс, который вы видите.
Это два разных процесса - выбор картинки и установка её в input и загрузка картинки на сервер.
Поставьте console.log'и и всё увидите.

[Genri_Rus]

Пашенька, спасибо за разъяснения

Вот какой мне код нужно добавить, чтобы увидеть разницу ?

Возможно я о другом сейчас думаю )

[Genri_Rus]

Пашенька, вы можете у меня глянуть в консоли: https://test.vintagetechnics.ru/reviews/ ?

Там вроде я использовал onprogress, но он работает только один раз

[Пашенька]

Genri_Rus, нужно цепляться на myXhr.upload.onprogress, а не на myXhr.onprogress.
myXhr.onprogress - выстрелит один раз(если ответ короткий, что скорее всего так и будет), так как это уже этап скачивания ответа от сервера, а нам нужен этап загрузки файла на сервер, он живёт здесь myXhr.upload.

[Genri_Rus]

Пашенька, я поменял, но разницы никакой нету: https://test.vintagetechnics.ru/reviews/

[Genri_Rus]

Пашенька, ну а прогресса загрузки нету, event.loaded/event.total * 100 + '%' - всегда 100%

[Пашенька]

Genri_Rus, конечно нету, потому что функция только консоль лог делает:
В ней нужно рисовать прогресс.

[Genri_Rus]

Пашенька, ну я сделал, один раз 1 (event.loaded/event.total) и все: https://test.vintagetechnics.ru/reviews/

Или не так ?

[Пашенька]

Genri_Rus, Там не 1 раз срабатывает, поставьте эмуляцию slow 3g и посмотрите: там много логов сыпется. Правильно, теперь нужно экстраполировать значения от 0 до 1 (или можно всё на 100 умножить) на какой-то DOM элемент. К примеру анимировать:

myXhr.upload.onprogress = function(e) {
    var percentComplete = e.loaded / e.total;
    // opacity
    el.style.opacity = percentComplete;
    // или ширину какую-нибудь:
    el.style.width = percentComplete * 100 + '%';
}

Но это не значит что анимации будут плавные, оно может и разом заполнится. Всё зависит от скорости интернета и объёма файла. Чем медленнее соединение и больше размер файла, тем плавнее эффект получится.

[Genri_Rus]

Пашенька, включите slow 3g на оригинальном сайте: vintagetechnics.ru/comment

Выберите все 5 картинок и посмотрите разницу

Даже в этом видео наглядно в slow 3g видно: https://recordit.co/tlMiAYHDvb

[Genri_Rus]

Пашенька, получается на их сервере есть ограничения на загрузку ?

[Genri_Rus]

Пашенька, ну на 23 секунде видите как медленно прогружается прелоадер ?

И там 100% у прелоадера всегда только после ответа сервера (а не до этого), если одновременно следить на вкладке network

[Пашенька]

Genri_Rus, Это то, о чём я уже упомянул, там прелоадер на 23 секунде прыгает примерно от 33% до 100% за раз, то есть ни о какой плавности тут речь идти не может, если только файл не гигабайтный.

100% прелоадер там, как и у вас, будет раньше, чем придёт ответ 200 от сервера, это я тоже уже объяснял и на видео это видно в самом конце.
В чём проблема я не понимаю, я уже максимально всё вам разжевал?

[Genri_Rus]

Пашенька,

100% прелоадер там, как и у вас, будет раньше, чем придёт ответ 200 от сервера

В том то и дело что нет, я записал новое видео: https://recordit.co/nYepKXBJly

100% наступает только после статуса 200 от сервера

[Genri_Rus]

Пашенька, вообщем они хитро сделали, у них прогресс доходит до 88% и после ответа от сервера сразу 100%

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

[Пашенька]

Genri_Rus, всё равно это всё контролируется на клиенткой стороне, после ответа сервера можно только поправить итоговое значение, чтобы оно было точно 100%, но это только в случае, если Front-End кривой, иначе незачем.

Основная причина удалённость хоста. Вторая причина конфигурация сервера и его мощность.

[Genri_Rus]

Пашенька, а превьюхи они делают с помощью filereader ?

xhr.upload.loadstart = function(event) {
  let reader = new FileReader();
}

Я там просто вижу blob с canvas

[Genri_Rus]

Пашенька, вообщем как оказалось, у данного сайта: https://test.vintagetechnics.ru/reviews/ домашний сервер
Поэтому такая скорость, у меня на локальном сервере вообще скорость мгновенная

Answer 1

[Евгений]

https://www.nginx.com/resources/wiki/modules/uploa...

Comments

[Genri_Rus]

А т.е. без сервера nginx такое не реализуешь ?

[Евгений]

можно https://stackoverflow.com/questions/15410265/file-...

[Genri_Rus]

Евгений, так, тогда в чем отличие вашего варианта с nginx и на stackoverflow ?

[Genri_Rus]

Евгений, вы смотрели в slow 3G ? Сейчас покажу, вот в конце видно: https://recordit.co/tlMiAYHDvb

[Евгений]

Genri_Rus, очень похоже на штуку типа такой https://blueimp.github.io/jQuery-File-Upload/
вариант с аплоад модулем nginx хорошо подходит для огромных файлов

[Genri_Rus]

Евгений, а т.е. с данным модулем у меня будет точно такой же эффект загрузки ?

[Евгений]

Genri_Rus, на vintagetechnics.ru это точно без nginx модуля сделано, чисто клиентом чекает onprogress ajax

[Genri_Rus]

Евгений, у них там сервер nginx

[Genri_Rus]

Евгений, чекать это постоянно отправлять запросы на сервер ?

[Евгений]

Genri_Rus, они чекают прогресс аякса через js, на сервер доп запросы не отсылаются, это же видно в нетворк, вот пруф из их сорцов

initUploadFile: function(e) {
        var t, i, n = this, o = ["doc", "docx", "xls", "xlsx", "pdf", "jpg", "jpeg", "gif", "png", "zip", "rar"], a = $(e), r = !1, s = $('<div id="progress"><div class="progressbar-value"></div></div>'), c = "fancybox-content", d = a.attr("data-file-upload") || "/putdocpub";
        a.is("#products-order-form") ? c = "products-edit-window" : a.is("#services-order-form") && (c = "services-edit-window"),
        t = a.find(".attach-btn a"),
        i = new Nethouse.Uploader(t[0],{
            path: d
        }),
        i.addExtensionFilter(o).addFileSizeFilter(20 * Nethouse.Uploader.MB).on("before", function(e) {
            e.length && (Notifier.showIndicator(c),
            s.hide(),
            r || (r = !0,
            t.after(s)),
            t.hide())
        }
        .bind(this)).on("progress", function(e) {
            s.show(),
            s.find(".progressbar-value").css({
                width: e.loaded / e.total * 100 + "%"
            })
        }).on("filecomplete", function(e, i, o) {
            if (Notifier.hideIndicator(c),
            s.hide(),
            t.show(),
            e)
                return void ntNotification.showError(sprintf(window.view.translate("js_uploader_upload_file_fail"), o.name), 6e3);
            var r, d, l, u, m, p, h, f = window.JSON.parse(i.response);
            f.success && f.url || ntNotification.showError(sprintf(window.view.translate("js_uploader_upload_file_fail"), o.name), 6e3),
            r = f.url,
            d = f.name,
            l = f.size,
            u = f.timestamp,
            a.find("#attach-url").val(r),
            a.find("#attach-name").val(d),
            a.find("#attach-size").val(l),
            a.find("#attach-timestamp").val(u),
            m = a.find(".attach-info .file-info"),
            m.find(".attach-file-name").html(d),
            p = n.getHumanReadableFileSize(l),
            m.find(".attach-file-size").html(p),
            m.parent().show(),
            a.find(".attach-btn").hide(),
            (h = n.getFileIcon(d)) && a.find(".file-icons").addClass(h)
        }).on("error", function(e, i) {
            s.hide(),
            t.show();
            var n = Nethouse.Uploader.Errors;
            switch (e) {
            case n.EXTENSION:
                ntNotification.showError(sprintf(view.translate("js_uploader_extension_fail"), i.file.name, o.join(", ")), 6e3);
                break;
            case n.MAX_SIZE:
                ntNotification.showError(sprintf(view.translate("js_uploader_max_size_fail"), i.file.name, "20 MB"), 6e3)
            }
        }
        .bind(this))
    }

[Genri_Rus]

Евгений, вы имеете ввиду про это ?

Стадия скачивания

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

[Евгений]

Genri_Rus, да

[Genri_Rus]

Евгений, а они что с помощью этого плагина делают ?
https://blueimp.github.io/jQuery-File-Upload/

Я просто тут не вижу:

<div class="upload-image__progress" style="top: 100%;"></div>

[Genri_Rus]

Евгений, а вы могли бы объяснить, как с помощью данного варианта:

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

Достичь такого эффекта как у них ?
Т.е. как сделать 100% при ответе сервера ?