Wie kann ich je nach Anwendungsfall die Anzahl der Dateien einschränken, die dropzone.js zulässt?
Beispielsweise muss ich möglicherweise nur 1, 2 oder 4 Dateien hochladen.
Es ist nicht uploadMultiple
. uploadMultiple
Gilt leider nur für die Anzahl der pro Anfrage bearbeiteten Dateien.
file
file-upload
upload
limit
dropzone.js
pydanny
quelle
quelle
maxFiles
ist die Antwort auf diese Frage, es ist nicht nötig, mehr Code zu schreiben. Vielen Dank.Antworten:
Das habe ich etwas anders erreicht. Ich entferne die alte abgelegte Datei jedes Mal, wenn eine neue Datei hinzugefügt wird. Es dient als Überschreiben der Datei, die die Benutzererfahrung war, die ich hier anstrebte.
quelle
this.files
existiert auch dort. Dies würde den Code etwas verkürzen.undefined
wenn nur eine Datei vorhanden ist, sodass die if-Bedingung immer true zurückgibt. Vielleicht einfach ändern zuif (this.files[1])
?Nowell wies darauf hin, dass dies ab dem 6. August 2013 behoben wurde. Ein Arbeitsbeispiel, das dieses Formular verwendet, könnte sein:
Sie könnten dieses JavaScript verwenden:
Das Dropzone-Element erhält sogar einen speziellen Stil, sodass Sie Folgendes tun können:
quelle
<form class="dropzone" id="myAwesomeDropzone"></form>
?Ich dachte, dass der intuitivste Prozess zum Hochladen einzelner Dateien darin bestand, die vorherige Datei durch einen neuen Eintrag zu ersetzen .
quelle
init: function(){ this.on('maxfilesexceeded', function(file){ this.removeAllFiles(); this.addFile(file); }); }
Option in meinem Projekt , auch mit der hinzugefügten OptionautoProcessQueue: false
.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 stammt :Wie kann ich die Anzahl der Dateien begrenzen?
quelle
Alternative Lösung, die für mich sehr gut funktioniert hat:
quelle
Sie können die Anzahl der hochgeladenen Dateien begrenzen, indem Sie in dropezone.js ändern
Dropzone.prototype.defaultOptions = {maxFiles: 10,}
quelle
Es sieht so aus, als ob maxFiles der gesuchte Parameter ist.
https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667
quelle
1-set maxFiles Count "maxFiles: 1" 2- in maxfilesexceeded event Alle Datei löschen und neue Datei hinzufügen
quelle
Warum verwenden Sie nicht einfach CSS, um das Klickereignis zu deaktivieren? Wenn die maximale Anzahl an Dateien erreicht ist, fügt Dropzone automatisch eine Klasse der erreichten dz-max-Dateien hinzu.
Verwenden Sie CSS, um das Klicken auf Dropzone zu deaktivieren:
Gutschrift: diese Antwort
quelle
Das Problem mit den bereitgestellten Lösungen ist, dass Sie immer nur 1 Datei hochladen können. In meinem Fall musste ich jeweils nur 1 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 ;)
quelle
Ich möchte darauf hinweisen. Vielleicht passiert mir das jedoch JEDOCH, wenn ich this.removeAllFiles () in dropzone verwende, löst es das Ereignis COMPLETE aus und dies bläst. Ich habe überprüft, ob die fileData leer waren oder nicht, damit ich das Formular tatsächlich senden konnte.
quelle
Sie können auch Rückrufe hinzufügen - hier verwende ich Dropzone für Angular
quelle
quelle