根据使用情况,如何约束dropzone.js允许的文件数?
例如,我可能只需要允许上传1、2或4个文件。
这不是“uploadMultiple”。不幸的是,“uploadMultiple”仅适用于每个请求处理的文件数。
例如,我可能只需要允许上传1、2或4个文件。
这不是“uploadMultiple”。不幸的是,“uploadMultiple”仅适用于每个请求处理的文件数。
我用了略微不同的方法。每次添加新文件时,我只是移除旧的已删除文件。这相当于覆盖了原有的文件,而这正是我想要的用户体验。
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]);
}
});
}
};
this.files
在那里也存在。这将稍微缩短代码。 - TomNowell指出这个问题已经在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!");
});
}
};
放置区元素甚至会获得特殊的样式,因此您可以进行以下操作:
<style>
.dz-max-files-reached {background-color: red};
</style>
<form class="dropzone" id="myAwesomeDropzone"></form>
吗? - MK Yung<script>Dropzone...</script>
放在<form>
上方时,它才对我起作用。 - SagarKapasi099我认为最直观的单个文件上传过程是在新条目中替换以前的文件。
$(".drop-image").dropzone({
url: '/cart?upload-engraving=true',
maxFiles: 1,
maxfilesexceeded: function(file) {
this.removeAllFiles();
this.addFile(file);
}
})
init: function(){ this.on('maxfilesexceeded', function(file){ this.removeAllFiles(); this.addFile(file); }); }
选项在我的项目中运行良好,即使添加了 autoProcessQueue: false
选项也是如此。 - RNickMcCandlessmaxFiles: 1
能够完成工作,但是如果你还想删除额外的文件,可以使用从Wiki页面中提取的这个示例代码:
如何限制文件数量?
你运气不错!从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]);
}
});
}
maxFiles
数量:maxFiles: 1
maxfilesexceeded
事件中,清除所有文件并添加一个新文件:事件:当文件数超过maxFiles限制时,对每个被拒绝的文件进行调用。
var myDropzone = new Dropzone("div#yourDropzoneID", { url: "/file/post",
uploadMultiple: false, maxFiles: 1 });
myDropzone.on("maxfilesexceeded", function (file) {
myDropzone.removeAllFiles();
myDropzone.addFile(file);
});
.dz-max-files-reached {
pointer-events: none;
cursor: default;
}
鸣谢:这个回答
看起来maxFiles是你正在寻找的参数。
https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667
你也可以添加回调函数 - 这里我正在使用 Angular 的 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);
}
}
maxFiles
就是这个问题的答案,没有必要编写更多的代码。谢谢。 - devasia2112