关键词：
【中文标题】如何限制上传的 dropzone.js 文件的数量？【英文标题】：How to limit the number of dropzone.js files uploaded? 【发布时间】：2013-08-05 14:36:55 【问题描述】：根据用例，如何限制 dropzone.js 允许的文件数量？
例如，我可能只需要允许上传 1、2 或 4 个文件。
不是uploadMultiple。不幸的是，uploadMultiple 仅适用于每个请求处理的文件数。
【问题讨论】：
使用 maxFiles。这会有所帮助 其实maxFiles就是这个问题的答案，不用多写代码。谢谢。
【参考方案1】：
我以稍微不同的方式实现了这一点。每当添加新文件时，我都会删除旧的删除文件。它充当覆盖文件，这是我在这里想要的用户体验。
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 也存在那里。这会稍微缩短代码。
将此代码放在 dropzone.js 或 html 代码中放置表单的位置
这是对另一个问题（如何覆盖以前上传的文件）的一个很好的回答。
在尝试了其他答案之后，这是唯一一个完全按照我想要的方式工作的答案。应该被接受的答案，恕我直言。
对我来说，在当前的 Chrome 上，当只有一个文件时，files[1] 是 undefined，所以 if 条件总是返回 true。也许只是换成if (this.files[1])？【参考方案2】：
Nowell pointed it out that this has been addressed 截至 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>
【讨论】：
不应该是<form class="dropzone" id="myAwesomeDropzone"></form>吗？
@MKYung 我知道这已经过去了将近一年，但是 id 是由 Dropzone 提取的，并且 enyo 为您制作了骆驼案。所以调用它要容易得多。 （一开始可能会有点令人困惑......但它有效，所以我不抱怨。）
添加 1 个文件时效果很好，然后添加下一个文件。虽然，如果您在机器上选择多个文件并将它们全部拖到 dropzone 表单中，它们都会被添加。如何预防？
只有当且仅当我将<script>Dropzone...</script> 放在<form> 上方时，它才对我有用【参考方案3】：
我认为最直观的单个文件上传过程是在新条目上替换之前的文件。
$(".drop-image").dropzone(
url: '/cart?upload-engraving=true',
maxFiles: 1,
maxfilesexceeded: function(file)
this.removeAllFiles();
this.addFile(file);
)
【讨论】：
这对我不起作用——但@oneirois 的另一个回答却是。 感谢您的提示，这就是我正在寻找的内容。如果适用，也不要忘记维护文件服务器端（即：以前的文件被删除）。 这在 autoProcessQueue 为 false 时不起作用。但是，它会在 maxFiles 为 0 且 autoProcessQueue 为 false 时触发。这一定是一个错误。 对我来说工作得非常好，并且同意这是最直观的单个文件上传过程:) +1 这个答案对于最终用户来说是一个更好的解决方案。使用init: function() this.on('maxfilesexceeded', function(file) this.removeAllFiles(); this.addFile(file); ); 选项在我的项目上运行良好，即使添加了autoProcessQueue: false 选项。【参考方案4】：
maxFiles: 1 可以完成这项工作，但如果您还想删除其他文件，可以使用取自 Wiki page 的示例代码：
如何限制文件数量？
你很幸运！从 3.7.0 开始 Dropzone 支持 maxFiles 选项。只需将其设置为所需的数量，您就可以开始使用了。 如果您不想查看被拒绝的文件，只需注册 maxfilesexceeded 事件，并立即删除文件：
myDropzone.on("maxfilesexceeded", function(file)
this.removeFile(file);
);
【讨论】：
这么多被低估的答案。【参考方案5】：对我来说效果很好的替代解决方案：
init: function()
this.on("addedfile", function(event)
while (this.files.length > this.options.maxFiles)
this.removeFile(this.files[0]);
);
【讨论】：
【参考方案6】：-
设置
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);
);
【讨论】：
【参考方案7】：你可以通过改变dropezone.js来限制上传文件的数量
Dropzone.prototype.defaultOptions = 最大文件数：10，
【讨论】：
更多这些选项可以在这里查看：dropzonejs.com/#configuration-options【参考方案8】：看起来 maxFiles 是您要查找的参数。
https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667
【讨论】：
这是在我打开这个问题两天后添加的。 ;-)【参考方案9】：为什么不直接使用 CSS 来禁用点击事件。当达到最大文件数时，Dropzone 会自动添加一个 dz-max-files-reached 类。
使用css禁用dropzone点击：
.dz-max-files-reached
pointer-events: none;
cursor: default;
信用：这个answer
【讨论】：
【参考方案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;
;
;
希望这会有所帮助；）
【讨论】：
【参考方案11】：我想指出。也许这只是发生在我身上，但是，当我在 dropzone 中使用 this.removeAllFiles() 时，它会触发事件 COMPLETE 并且这会发生，我所做的是检查 fileData 是否为空，以便我可以实际提交表单。
【讨论】：
【参考方案12】：您还可以添加回调 - 这里我使用 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);
【讨论】：
【参考方案13】：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);
);
;
【讨论】：
dropzone.js 图片上传接受的MimeTypes
】dropzone.js图片上传接受的MimeTypes【英文标题】：dropzone.jsimageuploadacceptedMimeTypes【发布时间】：2013-06-0509:51:28【问题描述】：我正在使用dropzone.js插件将图像上传器添加到我的应用程序。我知道这可能是一个非常基本的问题，所... 查看详情
如何使用 Dropzone.js 进行分块文件上传（仅限 PHP）？
】如何使用Dropzone.js进行分块文件上传（仅限PHP）？【英文标题】：HowdoyouuseDropzone.jswithchunkedfileuploads(PHPonly)?【发布时间】：2018-10-2801:13:45【问题描述】：我可以找到大量关于如何将分块文件上传与各种API和库一起使用的文档，... 查看详情
仅当单击提交按钮时，如何让 Dropzone.js 上传文件？
】仅当单击提交按钮时，如何让Dropzone.js上传文件？【英文标题】：HowtogetDropzone.jstouploadfilesonlywhenasubmitbuttonisclicked?【发布时间】：2013-11-2212:33:34【问题描述】：在过去的几天里，我一直在尝试在我的表单中实现Dropzone，但到目... 查看详情
dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库，提供AJAX异步文件上传功能，支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果，不依赖jQuery库。查看演示下载源码使用Dropzone我们可以建立一个正式的上传form表单，并... 查看详情
如何从 dropzone.js 上传和删除文件
】如何从dropzone.js上传和删除文件【英文标题】：howtouploadanddeletefilesfromdropzone.js【发布时间】：2013-10-2221:54:52【问题描述】：我使用了下面的代码，图像已被删除，但缩略图仍然显示。Dropzone.options.myDropzone=init:function()this.on("succe... 查看详情
如何使用 dropzone.js 和 hapi.js 上传图片
】如何使用dropzone.js和hapi.js上传图片【英文标题】：Howtouploadanimageusingdropzone.jsandhapi.js【发布时间】：2018-06-0307:15:15【问题描述】：按照tutorial，我正在尝试将图像文件上传到我的hapi.js服务器。我遇到了这个错误：CORS错误：不允... 查看详情
如何克服 Laravel dropzone 文件上传中的 getClientOriginalName() 错误？
】如何克服Laraveldropzone文件上传中的getClientOriginalName()错误？【英文标题】：HowtoovercomegetClientOriginalName()errorinLaraveldropzonefileupload?【发布时间】：2017-05-1415:20:10【问题描述】：我使用的是Laravel5.0，图片上传我使用的是dropzone.js。... 查看详情
重命名上传的文件，以便将其删除 DropZone.js
】重命名上传的文件，以便将其删除DropZone.js【英文标题】：RenameuploadedfilesoitcanberemovedDropZone.js【发布时间】：2015-02-2510:17:23【问题描述】：我决定更新这个问题，因为我仍然无法更改imageId这是我当前的dropzone实现$("div#UploadImage"... 查看详情
dropzone.js 更改显示单位
】dropzone.js更改显示单位【英文标题】：dropzone.jsChangedisplayunits【发布时间】：2015-03-0521:02:07【问题描述】：有谁知道是否可以更改上传文件的单位显示？我上传了一个600MB的文件，显示为0.6Gib……这不是真正的用户友好。我查看... 查看详情
如何从单独的函数调用 dropzone processQueue()？
】如何从单独的函数调用dropzoneprocessQueue()？【英文标题】：HowtocalldropzoneprocessQueue()fromseparatefunction?【发布时间】：2019-10-0517:06:09【问题描述】：我的表单包含dropzone.js，并通过jQuery插件formvalidation.io进行了验证。文件上传和验证... 查看详情
Dropzone.js 上传进度条不显示
】Dropzone.js上传进度条不显示【英文标题】：Dropzone.jsuploadprogressbarnotshowing【发布时间】：2014-05-2003:02:57【问题描述】：我正在使用Dropzone.js进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用Bootst... 查看详情
在每个文件上传时使用 dropzone.js 发送自定义数据
】在每个文件上传时使用dropzone.js发送自定义数据【英文标题】：Sendcustomdatawithdropzone.jsoneachFileUpload【发布时间】：2015-05-1809:26:26【问题描述】：我在我的CodeIgniter项目中使用dropzone。每次拖动文件时，dropzone都会创建一个ajax请求... 查看详情
dropzone拖动文件上传在thinkphp5中应用一个实例
参考：Dropzone的使用方法点击查看dropzone中文文档后台用的INSPINIA框架的模板，里面有，dropzone.jsdropzone是一个可以拖文件上传的js.拖进去，就上传了。我在页面上，写了一个保存已经上传的文件的image3,image4.这就需要改写一下dropzo... 查看详情
上传 30 秒后，使用 PHP 上传 Dropzone.js 失败
】上传30秒后，使用PHP上传Dropzone.js失败【英文标题】：Dropzone.jsuploadwithPHPfailedafter30secondsupload【发布时间】：2018-03-0422:19:45【问题描述】：我正在尝试将“大”文件上传到我的应用程序。用户必须能够上传小于200MB的视频文件，... 查看详情
如何使用 dropzone 上传 base64 图像资源？
】如何使用dropzone上传base64图像资源？【英文标题】：Howtouploadbase64imageresourcewithdropzone?【发布时间】：2014-04-0112:13:55【问题描述】：我正在尝试使用Dropzone.js上传生成的客户端文档（暂时的图像）。//.../init.jsvarmyDropzone=newDropzone("... 查看详情
在dropzone js上传目录中使每个挂载一个新文件夹
】在dropzonejs上传目录中使每个挂载一个新文件夹【英文标题】：makeeverymountanewfolderindropzonejsuploaddirectory【发布时间】：2019-04-0114:08:30【问题描述】：我在我的项目中使用dropzone.js来上传文章图片。例如所有文章图片都会上传到这... 查看详情
Dropzone.js 不再将多个 imgs 上传到 Android 上的网站
】Dropzone.js不再将多个imgs上传到Android上的网站【英文标题】：Dropzone.jsnolongeruploadingmultipleimgstowebsiteonAndroid【发布时间】：2015-10-0504:27:10【问题描述】：直到大约几周前，我的网络应用程序在桌面和移动设备上运行良好，使用drop... 查看详情
dropzone.js + 回形针将每张图片作为自己的帖子上传
】dropzone.js+回形针将每张图片作为自己的帖子上传【英文标题】：dropzone.js+paperclipuploadingeachimageasitsownpost【发布时间】：2014-09-1901:43:59【问题描述】：我遇到了一个奇怪的问题。我有Posthas_manyattachments.as::imageable和Attachmentbelongs_to... 查看详情