Dropzone.js - как сделать что-то после загрузки файлов ALL

Ответ 1

EDIT: Теперь существует queuecomplete событие, которое вы можете использовать именно для этой цели.

Предыдущий ответ:

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

Dropzone.options.filedrop = {
  init: function () {
    this.on("complete", function (file) {
      if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
        doSomething();
      }
    });
  }
};

Ответ 2

Просто используйте queuecomplete, что его там для и так просто. Проверьте документы http://www.dropzonejs.com/

queuecomplete > Вызывается, когда все файлы в очереди завершают загрузку.

      this.on("queuecomplete", function (file) {
          alert("All files have uploaded ");
      });

Ответ 3

Вероятно, есть способ (или три) сделать это... однако я вижу одну проблему с вашей целью: как вы знаете, когда все файлы были загружены? Перефразировать таким образом, чтобы иметь больше смысла... как вы знаете, что означает "все"? Согласно документации, init вызывается при инициализации самой Dropzone, а затем вы настраиваете обработчик события complete, чтобы что-то делать, когда каждый загруженный файл завершен. Но какой механизм предоставляет пользователю, чтобы программа могла знать, когда он сбросил все файлы, которые он намеревался сбросить? Если вы предполагаете, что он/она выполнит пакетное падение (то есть, бросьте на Dropzone 2-любое количество файлов одновременно, в одно действие), то следующий код может/возможно работать:

Dropzone.options.filedrop = {
    maxFilesize: 4096,
    init: function () {
        var totalFiles = 0,
            completeFiles = 0;
        this.on("addedfile", function (file) {
            totalFiles += 1;
        });
        this.on("removed file", function (file) {
            totalFiles -= 1;
        });
        this.on("complete", function (file) {
            completeFiles += 1;
            if (completeFiles === totalFiles) {
                doSomething();
            }
        });
    }
};

В принципе, вы смотрите в любое время, когда кто-то добавляет/удаляет файлы из Dropzone и сохраняет счет в переменных закрытия. Затем, когда каждая загрузка файла завершена, вы увеличиваете счетчик выполнения completeFiles var и видите, равен ли он теперь totalCount, который вы наблюдали и обновляли, когда пользователь размещал вещи в Dropzone. (Примечание: никогда не использовался плагин /JS lib., Поэтому лучше всего догадаться, что вы можете сделать, чтобы получить то, что хотите.)

Ответ 4

Добавлено событие "queuecomplete". См. Проблема 317.

Ответ 5

this.on("totaluploadprogress", function(totalBytes, totalBytesSent){


                    if(totalBytes == 100) {

                        //all done! call func here
                    }
                });

Ответ 6

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

myDropzone.on("totaluploadprogress", function(totalPercentage, totalBytesToBeSent, totalBytesSent ){
            if(totalPercentage >= 100 && totalBytesSent) {
                // All done! Call func here
            }
        });

Ответ 7

В дополнение к ответу @enyo при проверке файлов, которые все еще загружаются или находятся в очереди, я также создал новую функцию в dropzone.js для проверки любых файлов в состоянии ОШИБКИ (т.е. неправильный тип файла, размер и т.д.).

Dropzone.prototype.getErroredFiles = function () {
    var file, _i, _len, _ref, _results;
    _ref = this.files;
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        file = _ref[_i];
        if (file.status === Dropzone.ERROR) {
            _results.push(file);
        }
    }
    return _results;
};

Таким образом, проверка будет выглядеть следующим образом:

  if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getErroredFiles().length === 0) {
    doSomething();
  }

Ответ 8

Я пытался работать с этими решениями, но это не сработало. Но позже я понял, что функция не была объявлена, поэтому я смотрю на страницу dropzone.com и беру пример для вызова событий. Поэтому, наконец, работайте на моем сайте. Для таких, как я, которые не очень хорошо разбираются в JavaScript, я оставляю вам пример.

<script type="text/javascript" src="/js/dropzone.js"></script>
<script type="text/javascript">
// This example uses jQuery so it creates the Dropzone, only when the DOM has
// loaded.

// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;
// or disable for specific dropzone:
// Dropzone.options.myDropzone = false;

$(function() {
  // Now that the DOM is fully loaded, create the dropzone, and setup the
  // event listeners
  var myDropzone = new Dropzone(".dropzone");

  myDropzone.on("queuecomplete", function(file, res) {
      if (myDropzone.files[0].status != Dropzone.SUCCESS ) {
          alert('yea baby');
      } else {
          alert('cry baby');

      }
  });
});
</script>