Valums Ajax Uploader (Mutli) - определяет, когда все файлы загружены

Question

Я использую Valums Ajax Uploader для загрузки пакета файлов.Недавно мы изменили код с однократной загрузки на мультизагрузочную.Это вызвало проблему с нашим кодом.

Как вы можете видеть, когда происходит событие onComplete, мы перезагружаем страницу, чтобы показать вновь загруженные изображения.Однако, событие onComplete, похоже, запускается после завершения КАЖДОГО файла, а не после завершения всего пакета.Это теперь вызывает проблему, потому что, когда первый файл заканчивается, попытка перезагрузки страницы запускается, и загрузчик выскакивает предупреждение «Если вы покинете эту страницу, все хек вылетит на оставшиеся загрузки» - или что-то на этот счет.1005 *

Я заметил, что событие onComplete отправляет обратно ID на основе 0 для завершенного файла, но я не совсем уверен, как именно использовать это, чтобы определить, когда пакет сделан.

Я думаю,Мой вопрос: а) Есть ли другое событие, которое запускается, когда все файлы завершены, или Б) Как определить, сколько файлов выбрал пользователь, чтобы отслеживать в событии onComplete, сколько файлов завершено?

    var uploader = new qq.FileUploader({
        multiple: true,
        element: document.getElementById('file-uploader'),
        action: '/projectPhotoUpload.php',
        allowedExtensions: ['jpg', 'png', 'gif'],
        debug: true,
        params: {id: i},
        onComplete: function(id, fileName, responseJSON){
            window.location = 'projects.php?all=true&tab=1&sel=' + currProject;                                 
        }   
    })  

Answer 1

Вы можете добавить счетчик, который увеличивается при запуске загрузки и уменьшается при завершении.Переадресация только при завершении, когда счетчик равен 0.

var running = 0;  
var uploader = new qq.FileUploader({
    multiple: true,
    element: document.getElementById('file-uploader'),
    action: '/projectPhotoUpload.php',
    allowedExtensions: ['jpg', 'png', 'gif'],
    debug: true,
    params: {id: i},
    onSubmit: function(id, fileName){
        running++;                                 
    },
    onComplete: function(id, fileName, responseJSON){
        running--;
        if(running==0){
          window.location = 'projects.php?all=true&tab=1&sel=' + currProject;                                 
        }
    }   
}) 

Answer 2

Хороший ответ, из интереса, если вы хотите проверить responseJSON, чтобы увидеть, загружены ли файлы, он установлен на серверном скрипте

return array('success'=>true, 'filename'=>$filename . '.' . $ext);

Тогда вы можете забрать его в JS, как

var success = responseJSON["success"]
var filename = responseJSON["filename"]

Таким образом, вы можете составить список файлов и проверить имена по завершении или только уменьшить

if (success == true)

Если загрузка не удалась, возможно, вы не захотите уменьшать ее, например

Answer 3

Вам нужно будет добавить событие отмены, если пользователь отменяет загрузку файла:

onCancel: function(id, fileName){running--;}

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

Похоже, что лучший способ - использовать кнопку "I'm Done", которая будет перенаправлять после завершения загрузки пользователем.

Answer 4

Более простым способом было бы использовать внутреннее свойство _filesInProgress , чтобы проверить, были ли обработаны все загруженные файлы.Это дало бы:

var uploader = new qq.FileUploader({
    multiple: true,
    element: document.getElementById('file-uploader'),
    action: '/projectPhotoUpload.php',
    allowedExtensions: ['jpg', 'png', 'gif'],
    debug: true,
    params: {id: i},
    onComplete: function(id, fileName, responseJSON){
        if(uploader._filesInProgress == 0){
            window.location = 'projects.php?all=true&tab=1&sel=' + currProject;
        }                                 
    }   
});