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

Question

根据用例，如何限制 dropzone.js 允许的文件数量？

例如，我可能只需要允许上传 1、2 或 4 个文件。

不是uploadMultiple。不幸的是，uploadMultiple仅适用于每个请求处理的文件数。

score 166 · Accepted Answer

我以稍微不同的方式实现了这一点。每当添加新文件时，我都会删除旧的删除文件。它充当覆盖文件，这是我在这里想要的用户体验。

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

score 77 · Accepted Answer

Nowell 指出，截至 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>

score 74 · Accepted Answer

我认为最直观的单个文件上传过程是在新条目时替换以前的文件。

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

score 35 · Accepted Answer

maxFiles: 1完成这项工作，但如果您还想删除其他文件，您可以使用从Wiki 页面获取的示例代码：

如何限制文件数量？

你很幸运！从 3.7.0 开始 Dropzone 支持 maxFiles 选项。只需将其设置为所需的数量，您就可以开始使用了。如果您不想查看被拒绝的文件，只需注册 maxfilesexceeded 事件，并立即删除该文件：

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

score 9 · Accepted Answer

对我来说非常有效的替代解决方案：

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

score 5 · Accepted Answer

设置maxFiles计数：maxFiles: 1
万一，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);
});

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

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

https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667

score 1 · Accepted Answer

为什么不直接使用 CSS 来禁用 click 事件。当达到最大文件数时，Dropzone 会自动添加一个 dz-max-files-reached 类。

使用 css 禁用点击 dropzone：

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

信用：这个答案

score 0 · Accepted Answer

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

希望这可以帮助 ;）

score 0 · Accepted Answer

我想指出。也许这只是发生在我身上，但是，当我在 dropzone 中使用 this.removeAllFiles() 时，它会触发事件 COMPLETE 并且这会发生，我所做的是检查 fileData 是否为空，以便我可以实际提交表单。

score 0 · Accepted Answer

您还可以添加回调 - 这里我使用 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);
    }
}

score -1 · Accepted Answer

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

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

13 回答 13

Related

Reference