Как выполнить что-то до ajax и после, не включая его в синхронный режим?

Question

[Виталий]

Приветствую.

Недавно выучил php, взялся за необходимый разработчику js, и воткнулся во вроде бы простенькую задачку:

Мультизагрузка изображений через ajax. Если пользователь грузит несколько файлов разом, то все сразу послать нельзя - сработает upload_max_filesize. Поэтому посылаю по очереди, и по очереди вывожу миниатюры, НО...
До начала загрузки мне нужно скрыть поле загрузки файла и заблокировать кнопку submit, а после вывода последней миниатюры вернуть все как было.
Если я вставляю убирание-возвращение в начало и конец .onchange-функции, то он делает то и другое сразу, а не ждет загрузки. А мне надо, чтобы убрал, грузил все до последнего, затем возвращал.

Это, вроде, из-за асинхронности ajax, но в синхронный режим его ставить нельзя - вся страница повиснет, пока файлы грузятся.

var fileload = document.querySelector('#loadfile');
        fileload.onchange = function () {
            // СЮДА НУЖНО ВСТАВИТЬ УБИРАНИЕ КНОПКИ И БЛОКИРОВКУ SUBMIT
            // в переменную files заносятся файлы и включается formData
            for(var i = 0; i < files.length; i++){
                formData.append('image',files[i]);
                $.ajax({
                    // формируем и отправляем запрос
                }).done(function(o) {
                    // выводим превьюшки по мере загрузки файлов
                });
            }
            // А ЗДЕСЬ ВСЕ ВЕРНУТЬ КАК БЫЛО
        }

Подскажите, как это решить. Мне самому js еще учить и учить.

Answer 1

[Negwereth]

var fileload = document.querySelector('#loadfile');
        fileload.onchange = function () {
            // СЮДА НУЖНО ВСТАВИТЬ УБИРАНИЕ КНОПКИ И БЛОКИРОВКУ SUBMIT
            // в переменную files заносятся файлы и включается formData
            for(var i = 0; i < files.length; i++){
                formData.append('image',files[i]);
                $.ajax({
                    // формируем и отправляем запрос
                }).done(function(o) {
                    // выводим превьюшки по мере загрузки файлов
                    //  ЗДЕСЬ НАДО ВОЗВРАЩАТЬ КАК БЫЛО
                });
            }
        }

Comments

[Виталий]

Серьезно?
Всё до и после ajax будет выполнено сразу же, независимо от него. Кнопка уберется и через мгновение добавится, а файлы будут еще кучу времени уходить, обрабатываться, возвращаться. Поможете?

[Даша Циклаури]

Виталий: используй Promise.all , который дождется выполнения всех запросов на сервер и только после этого зарезолвится

[Виталий]

Даша Циклаури: Благодарю, я попробовал это решение, но в итоге нашел более простое, без промисов:
Сначала убираю кнопку, блокирую submit.
Затем одна функция посылает один файл через $.ajax, после этого в .done включает другую функцию, которая отдает ей новый файл, и так по кругу. Это позволяет и прогресс загрузки пофайлово видеть, и промежуточные действия делать. А когда файлы заканчиваются, значит вся асинхронная работа уже проделана и можно возвращать все, что было убрано до начала загрузки.
Выбрал такой путь, потому что $.ajax и так, вроде, промисами внутри себя пользуется - не видел смысла их еще поверх конструкции городить.