There is such a function of processing download stages. Now, when a file is uploaded to the server, a block with animation is displayed, at the end the block is removed and a notification about the successful upload is displayed. But in the case of multiple loading, the block is removed after the first downloaded file and the notification is displayed after each loaded file. How can I change this function so that the block with animation was removed, and the notification was displayed only after downloading all the files?

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 answer 1

    Try adding counter i:

    1. at the beginning of the file download increment i ++.
    2. at completion - decrement i--.

    and compare with zero if zero -> display a message.

    like this:

     // добавляем глобальную переменную 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); }

    if the files are very small, and there is a possibility that the first one will load faster than the second one will be loaded. This is decided by setting the 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 секунды перед выводом уведомления }
    • Is it possible, please, a little more detail, is not strong in js - X0TTA6bI4
    • @ X0TTA6bI4, corrected the answer. - bmsdave
    • Thank you, I did, but for some reason, when loading from 4 photos, the notification does not show - X0TTA6bI4
    • add after iterUploadFileInQueue-- and iterUploadFileInQueue ++ line console.log (iterUploadFileInQueue). to understand at what point the counter is lost and write what is written in the browser console - bmsdave
    • When loading large photos, the counter adds 2 times more values. That is, instead of 4, it is 8, and at minus, it only has 4 and the counter does not reach zero. And when loading small ones, everything is in order ... - X0TTA6bI4