Как ограничить количество dropzone.загружены файлы js?
в зависимости от варианта использования, как ограничить количество файлов, которые dropzone.js позволит?
например, мне может потребоваться разрешить загрузку только 1, 2 или 4 файлов.
это не uploadMultiple
. К сожалению, uploadMultiple
применяется только к количеству файлов, обрабатываемых по запросу.
12 ответов
Я достиг этого немного другим способом. Я просто удаляю старый файл при добавлении нового файла. Он действует как перезапись файла, который был пользовательским опытом, который я собирался здесь.
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]);
}
});
}
};
Ноуэлл указал, что это было адресовано по состоянию на 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>
Я думал, что наиболее интуитивным процессом загрузки одного файла было заменить предыдущий файл при новой записи.
$(".drop-image").dropzone({
url: '/cart?upload-engraving=true',
maxFiles: 1,
maxfilesexceeded: function(file) {
this.removeAllFiles();
this.addFile(file);
}
})
maxFiles: 1
делает свою работу, но если вы также хотите удалить дополнительные файлы, вы можете использовать этот пример кода взят из страница Wiki:
как я могу ограничить количество файлов?
вам повезло! Начиная с 3.7.0 Dropzone поддерживает maxFiles выбор. Просто установите его в нужное количество, и вы хорошо идти. Если вы не хотите, чтобы отклоненные файлы просматривались, просто зарегистрируйтесь мероприятие maxfilesexceeded, и немедленно удалите файл:
myDropzone.on("maxfilesexceeded", function(file)
{
this.removeFile(file);
});
похоже, что maxFiles-это параметр, который вы ищете.
https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667
вы можете ограничить количество файлов, загруженных путем изменения в dropezone.js
Dropzone.прототип.defaultOptions = { параметром maxfiles: 10, }
проблема с предоставленными решениями заключается в том, что вы можете загружать только 1 файл. В моем случае мне нужно загрузить только 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;
};
}
};
надеюсь, что это помогает ;)
Я хотел бы отметить. может быть, это просто происходит со мной, когда я использую это.removeAllFiles () в dropzone он запускает событие COMPLETE, и это удары, что я сделал, это проверить, пуст ли fileData или нет, чтобы я мог фактически отправить форму.
почему бы вам просто не использовать CSS для отключения события click. Когда max files достигнут, Dropzone автоматически добавит класс DZ-max-files-reached.
используйте css, чтобы отключить нажмите на dropzone:
.dz-max-files-reached {
pointer-events: none;
cursor: default;
}
кредит: это ответ
вы также можете добавить обратные вызовы-здесь я использую 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);
}
}
альтернативное решение, которое сработало для меня:
init: function() {
this.on("addedfile", function(event) {
while (this.files.length > this.options.maxFiles) {
this.removeFile(this.files[0]);
}
});
}
Dropzone.options.dpzSingleFile = {
paramName: "file", // The name that will be used to transfer the file
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
}
};