Как ограничить количество загружаемых файлов dropzone.js?

Ответ 1

Nowell указал на то, что это было рассмотрено с 6 августа 2013 года. Рабочим примером с использованием этой формы может быть:

<form class="dropzone" id="my-awesome-dropzone"></form>

Вы можете использовать этот JavaScript:

Dropzone.options.myAwesomeDropzone = {
  maxFiles: 1,
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!");
    });
  }
};

Элемент dropzone даже получает особый стиль, поэтому вы можете делать такие вещи, как:

<style>
  .dz-max-files-reached {background-color: red};
</style>

Ответ 2

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

Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("addedfile", function() {
      if (this.files[1]!=null){
        this.removeFile(this.files[0]);
      }
    });
  }
};

Ответ 3

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

  $(".drop-image").dropzone({
    url: '/cart?upload-engraving=true',
    maxFiles: 1,
    maxfilesexceeded: function(file) {
        this.removeAllFiles();
        this.addFile(file);
    }
})

Ответ 4

maxFiles: 1 выполняет задание, но если вы также хотите удалить дополнительные файлы, вы можете использовать этот примерный код, взятый на странице Wiki:

Как ограничить количество файлов?

Вам повезло! Начиная с 3.7.0 Dropzone поддерживает maxFiles вариант. Просто установите его на нужное количество, и вам хорошо идти. Если вы не хотите, чтобы отклоненные файлы просматривались, просто зарегистрируйтесь для событие maxfilesexceeded и немедленно удалить файл:

myDropzone.on("maxfilesexceeded", function(file)
{
    this.removeFile(file);
});

Ответ 5

похоже, что maxFiles - это параметр, который вы ищете.

https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667

Ответ 6

Вы можете ограничить количество загружаемых файлов, изменив в файле dropezone.js

Dropzone.prototype.defaultOptions = {     maxFiles: 10, }

Ответ 7

Проблема с предоставленными решениями заключается в том, что вы можете загружать только один файл за один раз. В моем случае мне нужно было загружать только 1 файл за один раз (при щелчке или при удалении).

Это было мое решение.

    Dropzone.options.myDropzone = {
        maxFiles: 2,
        init: function() {
            this.handleFiles = function(files) {
                var file, _i, _len, _results;
                _results = [];
                for (_i = 0, _len = files.length; _i < _len; _i++) {
                    file = files[_i];
                    _results.push(this.addFile(file));
                    // Make sure we don't handle more files than requested
                    if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) {
                        break;
                    }
                }
                return _results;
            };
            this._addFilesFromItems = function(items) {
                var entry, item, _i, _len, _results;
                _results = [];
                for (_i = 0, _len = items.length; _i < _len; _i++) {
                    item = items[_i];
                    if ((item.webkitGetAsEntry != null) && (entry = item.webkitGetAsEntry())) {
                        if (entry.isFile) {
                            _results.push(this.addFile(item.getAsFile()));
                        } else if (entry.isDirectory) {
                            _results.push(this._addFilesFromDirectory(entry, entry.name));
                        } else {
                            _results.push(void 0);
                        }
                    } else if (item.getAsFile != null) {
                        if ((item.kind == null) || item.kind === "file") {
                            _results.push(this.addFile(item.getAsFile()));
                        } else {
                            _results.push(void 0);
                        }
                    } else {
                        _results.push(void 0);
                    }
                    // Make sure we don't handle more files than requested
                    if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) {
                        break;
                    }
                }
                return _results;
            };
        }
    };

Надеюсь, что это поможет;)

Ответ 8

Я хотел бы указать. возможно, это просто происходит со мной, ОДНАКО, когда я использую this.removeAllFiles() в dropzone, он запускает событие COMPLETE, и это удары, я сделал проверку, если fileData пуст или нет, поэтому я действительно могу отправить форму.

Ответ 9

Почему бы вам просто не использовать CSS для отключения события click. Когда максимальные файлы будут достигнуты, Dropzone автоматически добавит класс dz-max-files-reached.

Используйте css для отключения нажатия на dropzone:

.dz-max-files-reached {
          pointer-events: none;
          cursor: default;
}

Кредит: этот ответ

Ответ 10

Вы также можете добавить обратные вызовы - здесь я использую Dropzone для Angular

dzCallbacks = {
    'addedfile' : function(file){
        $scope.btSend = false;
        $scope.form.logoFile = file;
    },
    'success' : function(file, xhr){
        $scope.btSend = true;
        console.log(file, xhr);
    },
    'maxfilesexceeded': function(file) {
         $timeout(function() { 
            file._removeLink.click();
        }, 2000);
    }
}