0

Есть такая функция обработки стадий закачки. Сейчас при выгрузке файла на сервер выводится блок с анимацией, по окончании блок убирается и выводится уведомление об успешной загрузке. Но при множественной загрузке блок убирается после первого загруженного файла и уведомление выводится после каждого загруженного файла. Как можно изменить данную функцию, чтобы блок с анимацией убирался, а уведомление выводилось только после загрузки всех файлов?

function uploadFile(file){
var url = "/upload";
    var xhr = new XMLHttpRequest();
        xhr.upload.onprogress = function(){
            $('.loader').show();
        }
        xhr.upload.onload = function() {
            $('.loader').hide();
            (function Notification() {
                var notification = new NotificationFx({
                    message : "<p>Фотографии загружены</p>",
                    layout : "growl",
                    effect : "jelly",
                    type : "success",
                });
                notification.show();        
            })();
        }
    var fd = new FormData();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText); // handle response.
        }
    };
    fd.append('uploaded_file', file);
    xhr.send(fd);
}

1 ответ 1

1

Попробуйте добавить счетчик i:

  1. при начале загрузке файла инкремент i++.
  2. при завершении - декремент i--.

и сравнивать с нулем, если нуль -> выводить собщение.

например так:

// добавляем глобальную переменную iterUploadFileInQueue
var iterUploadFileInQueue = 0;

function uploadFile(file){
var url = "/upload";
    var xhr = new XMLHttpRequest();
        xhr.upload.onprogress = function(){
            $('.loader').show();
            // если запрос на загрузку создан -> +1
            iterUploadFileInQueue++;
        }
        xhr.upload.onload = function() {
            $('.loader').hide();
            // файл загружен -> -1
            iterUploadFileInQueue--;
            if (i == 0){
                (function Notification() {
                    var notification = new NotificationFx({
                        message : "<p>Фотографии загружены</p>",
                        layout : "growl",
                        effect : "jelly",
                        type : "success",
                    });
                    notification.show();        
                })();
            }

        }
    var fd = new FormData();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText); // handle response.
        }
    };
    fd.append('uploaded_file', file);
    xhr.send(fd);
    }

если файлы будут очень маленькие, и есть возможность что первый загрузится быстрее чем будет поставлен на загрузку второй. То это решается выставлением timeout:

        xhr.upload.onload = function() {
            $('.loader').hide();
            setTimeout(function(){
                // файл загружен -> -1
                iterUploadFileInQueue--;
                if (i == 0){
                    (function Notification() {
                        var notification = new NotificationFx({
                            message : "<p>Фотографии загружены</p>",
                            layout : "growl",
                            effect : "jelly",
                            type : "success",
                        });
                        notification.show();        
                    })();
                }
            }, 3000); // ждет 3 секунды перед выводом уведомления
        }
8
  • А можно, пожалуйста, чуть подробней, не силен в js
    – X0TTA6bI4
    20 фев 2016 в 18:11
  • @X0TTA6bI4, поправил ответ.
    – bmsdave
    22 фев 2016 в 17:10
  • Спасибо, так и сделал, но почему то при загрузке от 4 фотографий уведомление не показывает
    – X0TTA6bI4
    27 фев 2016 в 12:07
  • добавьте после iterUploadFileInQueue-- и iterUploadFileInQueue++ строчку console.log(iterUploadFileInQueue). что бы понимать в какой момент теряется счетчик и напишите что пишется в консоль браузера
    – bmsdave
    27 фев 2016 в 18:08
  • При загрузке больших фотографий счетчик добавляет в 2 раза больше значений. Т.е вместо 4-х - 8, а при минусации отбавляет только 4 и счетчик не доходит до нуля. А при загрузке маленьких, все в порядке...
    – X0TTA6bI4
    28 фев 2016 в 12:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.