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

Posted 2023-02-22

【中文标题】如何限制上传的 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);
        );
    
;