webentwicklung-frage-antwort-db.com.de

Wie beschränke ich die Anzahl der hochgeladenen dropzone.js-Dateien?

Wie beschränke ich je nach Anwendungsfall die Anzahl der Dateien, die dropzone.js zulässt?

Zum Beispiel muss ich möglicherweise nur 1, 2 oder 4 hochgeladene Dateien zulassen.

Es ist nicht uploadMultiple. Leider gilt uploadMultiple nur für die Anzahl der Dateien, die pro Anfrage bearbeitet werden.

filefile-uploaduploadlimitdropzone.js
64
pydanny

Nowell wies darauf hin, dass dies angesprochen wurde ab 6. August 2013. Ein Arbeitsbeispiel, das dieses Formular verwendet, könnte sein:

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

Sie könnten dieses JavaScript verwenden:

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!");
    });
  }
};

Das dropzone-Element erhält sogar einen besonderen Stil, sodass Sie Folgendes tun können:

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

Dies ist mir etwas anders gelungen. Ich entferne einfach die alte abgelegte Datei, wenn eine neue Datei hinzugefügt wird. Es dient dazu, die Datei zu überschreiben. Dies war die Benutzererfahrung, die ich hier wollte.

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]);
      }
    });
  }
};
141
oneirois

Ich dachte, dass der intuitivste Vorgang beim Hochladen einer einzelnen Datei darin bestand, die vorherige Datei bei einem neuen Eintrag zu ersetzen .

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

maxFiles: 1 erledigt den Job, aber wenn Sie auch die zusätzlichen Dateien entfernen möchten, können Sie diesen Beispielcode verwenden, der von der Wiki-Seite entnommen wurde :

Wie kann ich die Anzahl der Dateien begrenzen?

Du hast Glück! Ab 3.7.0 unterstützt Dropzone die maxFiles Möglichkeit. Stellen Sie einfach die gewünschte Menge ein und Sie können loslegen. Wenn Sie nicht möchten, dass die abgelehnten Dateien angezeigt werden, registrieren Sie sich einfach für das Ereignis maxfilesexceeded, und entfernen Sie die Datei sofort:

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

es sieht so aus, als ob maxFiles der Parameter ist, nach dem Sie suchen.

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

3
Nowell

Alternative Lösung, die für mich wirklich gut funktioniert hat:

init: function() {
    this.on("addedfile", function(event) {
        while (this.files.length > this.options.maxFiles) {
            this.removeFile(this.files[0]);
        }
    });
}
2
xaviert

Sie können die Anzahl der hochgeladenen Dateien einschränken, indem Sie in dropzone.js ändern

Dropzone.prototype.default Options = { maxFiles: 10, }

1
vipinlalrv

Warum verwenden Sie nicht einfach CSS, um das Klickereignis zu deaktivieren. Wenn die maximale Anzahl von Dateien erreicht ist, fügt Dropzone automatisch eine Klasse der erreichten DZ-Max-Dateien hinzu.

Verwenden Sie css, um den Klick auf dropzone zu deaktivieren: 

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

Kredit: diese Antwort

1
Timmy Von Heiss

Ich möchte darauf hinweisen. Vielleicht passiert mir das JEDOCH nur, wenn ich this.removeAllFiles () in dropzone verwende. Es löst das Ereignis COMPLETE aus und dies wird ausgelöst. Ich habe geprüft, ob die fileData leer ist oder nicht, damit ich das Formular tatsächlich senden kann.

0
Lucas Gabriel

Sie können auch Rückrufe hinzufügen - hier verwende ich Dropzone für 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);
    }
}
0
Makah

Das Problem mit den angebotenen Lösungen ist, dass Sie nur 1 Datei hochladen können. In meinem Fall musste ich jeweils nur eine Datei hochladen (per Klick oder Drop).

Das war meine Lösung ..

    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;
            };
        }
    };

Hoffe das hilft ;)

0
SimonDepelchin