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 that you have read and understand our privacy policy and code of conduct.

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