如何限制上传的 drozone.js 文件的数量？

看起来 maxFiles 就是您要查找的参数。

Https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#l667

诺埃尔指出，截至2013年8月6日，这个问题已经得到解决。使用此表单的一个实例可能是:

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

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

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

maxFiles: 1完成这项工作，但如果你也想删除其他文件，你可以使用这个样本代码从 维基页面:

如何限制文件的数量？

您很幸运! Dropzone 从3.7.0开始支持 maxFiles 选择。只需设置它的理想数量，你就可以去。 如果您不希望查看被拒绝的文件，只需注册 事件，并立即删除该文件:

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

我用一种稍微不同的方式达到了这个目的。每当添加新文件时，我只是删除旧的已删除文件。它的作用是覆盖文件，这是我在这里的用户体验。

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

我认为最直观的单文件上传过程是 更换上一个新条目的前一个文件。

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

所提供的解决方案的问题是您只能上传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;
};
}
};

希望这有所帮助;)

我想指出。也许这只是发生在我身上，但是，当我在 drop zone 中使用 this.RemoveAllFiles ()时，它会触发事件 COMPLETE，这就爆炸了，我所做的就是检查 fileData 是否为空，这样我就可以提交表单了。

为什么不使用 CSS 来禁用 click 事件呢。当达到 max 文件时，Dropzone 将自动添加一个 dz-max-files-reach 类。

使用 css 禁用点击下拉区:

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

来源: 这个 回答

您可以通过更改 dropezone.js 来限制上载的文件数量

DefaultOptions = { MaxFiles: 10, }

你也可以添加回调-在这里我使用的角度 Dropzone

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

1. 设置 maxFiles计数: maxFiles: 1
2. 在 maxfilesexceeded事件中，清除所有文件并添加一个新文件:

Event: 为每个因为数字而被拒绝的文件调用 的文件超过了 maxFiles 限制。

var myDropzone = new Dropzone("div#yourDropzoneID", { url: "/file/post",
uploadMultiple: false, maxFiles: 1 });


myDropzone.on("maxfilesexceeded", function (file) {
myDropzone.removeAllFiles();
myDropzone.addFile(file);
});