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

Question

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

例如,我可能只需要允许上传1个,2个或4个文件.

事实并非如此uploadMultiple.不幸的是,uploadMultiple仅适用于每个请求处理的文件数.

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

Answer 2

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>

Answer 3

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

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

Answer 4

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

如何限制文件数量？

你很幸运!从3.7.0开始Dropzone支持maxFiles选项.只需将其设置为所需的数量,就可以了.如果您不希望查看被拒绝的文件,只需注册maxfilesexceeded事件,并立即删除该文件:

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

Answer 5

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

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

Answer 6

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

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

Answer 7

1. 设置maxFiles计数：maxFiles: 1
2. 在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);
});