blocks|key|48209|text|截至2013年8月6日的Nowell+pointed+it+out+that+this+has+been+addressed。使用此表单的工作示例可能是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|48210|<form+class="dropzone"+id="my-awesome-dropzone"></form>|code-block|syntax|javascript|48211|您可以使用此JavaScript：|48212|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!");
++++});
++}
};|48213|dropzone元素甚至获得了一种特殊的样式，因此您可以执行以下操作：|48214|<style>
++.dz-max-files-reached+{background-color:+red};
</style>|48215|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/18156897/93270^0|C|1E|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<a href="https://stackoverflow.com/a/18156897/93270">Nowell pointed it out that this has been addressed</a> as of August 6th, 2013. A working example using this form might be:

<pre><code>&lt;form class="dropzone" id="my-awesome-dropzone"&gt;&lt;/form&gt;
</code></pre>

You could use this JavaScript:

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

The dropzone element even gets a special style, so you can do things like:

<pre><code>&lt;style&gt;
 .dz-max-files-reached {background-color: red};
&lt;/style&gt;
</code></pre>

blocks|key|264849|text|我以一种稍微不同的方式实现了这一点。每当添加新文件时，我只是删除已删除的旧文件。它的作用是覆盖文件，这是我在这里想要的用户体验。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264850|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]);
++++++}
++++});
++}
};|code-block|syntax|javascript|264851|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I achieved this a slightly different way. I just remove the old dropped file any time a new file is added. It acts as overwriting the file which was the user experience I was going for here.

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

blocks|key|265070|text|对我来说效果非常好的替代解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|265071|init:+function()+{
++++this.on("addedfile",+function(event)+{
++++++++while+(this.files.length+>+this.options.maxFiles)+{
++++++++++++this.removeFile(this.files[0]);
++++++++}
++++});
}|code-block|syntax|javascript|265072|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Alternative solution that worked really well for me:

<pre><code>init: function() {
 this.on("addedfile", function(event) {
 while (this.files.length &gt; this.options.maxFiles) {
 this.removeFile(this.files[0]);
 }
 });
}
</code></pre>

blocks|key|48384|text|您可以通过在dropezone.js中更改来限制上传的文件数量|type|unstyled|depth|inlineStyleRanges|entityRanges|data|48385|Dropzone.prototype.defaultOptions+={+maxFiles:+10，}|48386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You can limit the number of files uploaded by changing in dropezone.js

Dropzone.prototype.defaultOptions = {
 maxFiles: 10,
}

blocks|key|264815|text|看起来maxFiles就是您要查找的参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264816|https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667|offset|length|264817|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1X|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

it looks like maxFiles is the parameter you are looking for.

<a href="https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667" rel="nofollow">https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667</a>

blocks|key|264954|text|为什么不直接使用CSS来禁用单击事件呢？当达到最大文件数时，Dropzone会自动添加一个dz-+max+-+files+-reached类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264955|使用css禁用dropzone上的单击：|264956|.dz-max-files-reached+{
++++++++++pointer-events:+none;
++++++++++cursor:+default;
}|code-block|syntax|javascript|264957|致谢:此answer|offset|length|264958|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/29392241/5830835^0|0|0|0|4|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Why do not you just use CSS to disable the click event. When max files is reached, Dropzone will automatically add a class of dz-max-files-reached.

Use css to disable click on dropzone: 

<pre><code>.dz-max-files-reached {
 pointer-events: none;
 cursor: default;
}
</code></pre>

Credit: this <a href="https://stackoverflow.com/a/29392241/5830835">answer</a>

blocks|key|264889|text|所提供的解决方案的问题是，您一次只能上传一个文件。在我的例子中，我一次只需要上传一个文件(点击或下载)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264890|这是我的解决方案..|264891|++++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%2B%2B)+{
++++++++++++++++++++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%2B%2B)+{
++++++++++++++++++++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)+%7C%7C+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;
++++++++++++};
++++++++}
++++};|code-block|syntax|javascript|264892|希望这能有所帮助;)|264893|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The problem with the solutions provided is that you can only upload 1 file ever. In my case I needed to upload only 1 file at a time (on click or on drop).

This was my solution..

<pre class="lang-js prettyprint-override"><code> Dropzone.options.myDropzone = {
 maxFiles: 2,
 init: function() {
 this.handleFiles = function(files) {
 var file, _i, _len, _results;
 _results = [];
 for (_i = 0, _len = files.length; _i &lt; _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 &amp;&amp; this.options.maxFiles &gt; 0 &amp;&amp; _i &gt;= (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 &lt; _len; _i++) {
 item = items[_i];
 if ((item.webkitGetAsEntry != null) &amp;&amp; (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 &amp;&amp; this.options.maxFiles &gt; 0 &amp;&amp; _i &gt;= (this.options.maxFiles - 1)) {
 break;
 }
 }
 return _results;
 };
 }
 };
</code></pre>

Hope this helps ;)

blocks|key|48287|text|我想指出的是。也许这只发生在我身上，但是，当我在dropzone中使用this.removeAllFiles()时，它会触发事件COMPLETE，这很糟糕，我所做的就是检查fileData是否为空，这样我就可以真正提交表单了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|48288|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I'd like to point out. maybe this just happens to me, HOWEVER, when I use this.removeAllFiles() in dropzone, it fires the event COMPLETE and this blows, what I did was check if the fileData was empty or not so I could actually submit the form.

blocks|key|48415|text|你也可以添加回调函数--这里我为Angular使用了Dropzone|type|unstyled|depth|inlineStyleRanges|entityRanges|data|48416|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);
++++}
}|code-block|syntax|javascript|48417|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also add in callbacks - here I'm using Dropzone for Angular 

<pre><code>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);
 }
}
</code></pre>

blocks|key|265080|text|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);
++++++++});
++++}
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|265081|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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);
 });
 }
};
</code></pre>

Depending on the use case, how do I constrain the number of files that dropzone.js will allow?

For example, I might need to only allow 1, 2, or 4 files uploaded.

It's not <code>uploadMultiple</code>. Unfortunately, <code>uploadMultiple</code> only applies to the number of files handled per request.

How to limit the number of dropzone.js files uploaded?

根据用例的不同，如何限制dropzone.js允许的文件数量？例如，我可能只需要允许上传1、2或4个文件。不是uploadMultiple。不幸的是，uploadMultiple仅适用于每个请求处理的文件数。

问如何限制dropzone.js文件的上传数量？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何限制dropzone.js文件的上传数量？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何限制dropzone.js文件的上传数量？
EN