根据用例，如何限制 dropzone.js 允许的文件数量？
例如，我可能只需要允许上传 1、2 或 4 个文件。
这不是
uploadMultipleuploadMultiple我以稍微不同的方式实现了这一点。 每当添加新文件时，我都会删除旧的删除文件。 它的作用相当于覆盖文件，这就是我在这里想要的用户体验。
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]);
}
});
}
};
Nowell 指出，截至 2013 年 8 月 6 日，这个问题已得到解决。使用此表单的工作示例可能是：
<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如何限制文件数量？
你很幸运！从 3.7.0 开始 Dropzone 支持 maxFiles 选项。只需将其设置为所需的数量即可。 如果您不希望查看被拒绝的文件，只需注册 maxfilesexceeded 事件，并立即删除文件：
myDropzone.on("maxfilesexceeded", function(file)
{
this.removeFile(file);
});
对我来说非常有效的替代解决方案：
init: function() {
this.on("addedfile", function(event) {
while (this.files.length > this.options.maxFiles) {
this.removeFile(this.files[0]);
}
});
}
您可以通过更改 dropezone.js 来限制上传的文件数量
Dropzone.prototype.defaultOptions = { 最大文件数：10， }
maxFilesmaxFiles: 1maxfilesexceeded事件：针对因数量而被拒绝的每个文件调用 文件数超过 maxFiles 限制。
var myDropzone = new Dropzone("div#yourDropzoneID", { url: "/file/post",
uploadMultiple: false, maxFiles: 1 });
myDropzone.on("maxfilesexceeded", function (file) {
myDropzone.removeAllFiles();
myDropzone.addFile(file);
});
看起来 maxFiles 是您正在寻找的参数。
https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667
为什么不直接使用CSS来禁用点击事件呢？当达到最大文件数时，Dropzone 将自动添加 dz-max-files-reached 类。
使用 css 禁用点击拖放区：
.dz-max-files-reached {
pointer-events: none;
cursor: default;
}
信用：这个答案
我想指出。也许这只是发生在我身上，但是，当我在 dropzone 中使用 this.removeAllFiles() 时，它会触发事件 COMPLETE 并且这会失败，我所做的是检查 fileData 是否为空，以便我可以实际提交表单。
所提供的解决方案的问题是您只能上传 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;
};
}
};
希望这有帮助；）
您还可以添加回调 - 这里我使用 Dropzone for 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);
}
}
要限制 Dropzone 将接受的文件数量，请使用
maxFiles您可能还想通知用户已超出文件限制。这涉及监听
maxfilesreachedmaxfilesexceeded默认情况下，Dropzone 的构建假设您将显示所有提交的文件（包括已拒绝的文件）的文件预览。拒绝会标有错误消息，要求用户主动忽略它们。
如果您想显示对话框消息而不是显示被拒绝文件的预览，则需要做更多的工作。 Dropzone 不提供区分单个文件提交和批量提交的机制。
maxfilesreachedmaxfilesexceeded幸运的是，在批量提交的情况下，所有
maxfilesreachedmaxfilesexceededsetTimeoutconst dropzoneInstance = new Dropzone('#dropzone', {
maxFiles: 8
});
// Handle file submissions with a file count exceeding `maxFiles` limit.
let separateSubmission = true;
dropzoneInstance.on('maxfilesexceeded', (file)=>{
// Show error dialog once per isolated file submission.
if (separateSubmission === true){
window.alert('The file limit reached. Excess files have not been submitted.');
}
// Disable error dialog while handling the same submission.
separateSubmission = false;
// Remove rejected file.
if (file.status === 'error'){
dropzoneInstance.removeFile(file);
}
// Schedule toggle to be reset once event queue empty.
setTimeout(() => {
separateSubmission = true;
}, 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);
});
}
};