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

Question

根据使用情况，如何约束dropzone.js允许的文件数？

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

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

- pydanny

---

使用maxFiles。这将有所帮助。 - Uday Hiwarale

实际上，maxFiles就是这个问题的答案，没有必要编写更多的代码。谢谢。 - devasia2112

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

- oneirois

---

这个方法非常有效，其他答案则不行。您也可以在“接受”函数中完成相同的工作。this.files 在那里也存在。这将稍微缩短代码。 - Tom

将此代码放置在Dropzone.js或HTML代码中表单所在的位置。 - user4101972

这是对一个不同问题（如何覆盖先前上传的文件）的很好回答。 - Rosa

非常棒！完美呈现我想要的效果。 - Shilpa Soni

对于我当前使用的Chrome浏览器，当只有一个文件时，files[1]是“undefined”，因此if条件始终返回true。也许只需更改为“if（this.files [1]）”？ - smoyth

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

放置区元素甚至会获得特殊的样式，因此您可以进行以下操作：

<style>
  .dz-max-files-reached {background-color: red};
</style>

- pydanny

---

难道不应该是<form class="dropzone" id="myAwesomeDropzone"></form>吗？ - MK Yung

@MKYung 我知道这已经过去将近一年了，但是id是由Dropzone提取的，而enyo会为您制作驼峰式大小写。因此，调用它会更容易。 （显然一开始可能有点困惑...但它有效，所以我不抱怨。） - Cayce K

当添加一个文件，然后再添加下一个文件时，它可以正常工作。但是，如果您在计算机上选择多个文件并将它们全部拖到拖放区表单中，则所有文件都会被添加。如何防止这种情况发生？ - trs

只有当我将<script>Dropzone...</script>放在<form>上方时，它才对我起作用。 - SagarKapasi099

Answer 3

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

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

- Yuji 'Tomita' Tomita

---

这对我没用 - 但是@oneirois的另一个答案有效。 - Robert Dodd

谢谢您的提示，这正是我在寻找的。如果适用的话，也不要忘记维护文件服务器端（即：删除以前的文件）。 - Pierre de LESPINAY

对我来说完美地运作了，我同意这是最直观的单文件上传过程 :) - zachu

+1 这个答案对最终用户来说是一个更好的解决方案。使用 init: function(){ this.on('maxfilesexceeded', function(file){ this.removeAllFiles(); this.addFile(file); }); } 选项在我的项目中运行良好，即使添加了 autoProcessQueue: false 选项也是如此。 - RNickMcCandless

@RNickMcCandless 很高兴听到这个项目多年后仍然有用！ - Yuji 'Tomita' Tomita

Answer 4

maxFiles: 1 能够完成工作，但是如果你还想删除额外的文件，可以使用从Wiki页面中提取的这个示例代码：

如何限制文件数量？

你运气不错！从3.7.0版本开始，Dropzone支持maxFiles选项。只需将其设置为所需数量即可。如果您不希望查看被拒绝的文件，请注册maxfilesexceeded事件并立即删除该文件：

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

- Leniel Maccaferri

---

如此被低估的答案。 - Saad Suri

Answer 5

对我非常有效的另一种解决方案：

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

- xaviert

Answer 6

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

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

- vipinlalrv

---

更多的选项可以在这里查看：https://www.dropzonejs.com/#configuration-options - Jordan

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

- shab

Answer 8

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

使用CSS禁用Dropzone上的点击事件：

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

鸣谢：这个回答

- Timmy Von Heiss

---

您将无法删除错误上传的文件。 - diesel94

Answer 9

看起来maxFiles是你正在寻找的参数。

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

- Nowell

---

这是在我提出这个问题两天后添加的。;-) - pydanny

Answer 10

你也可以添加回调函数 - 这里我正在使用 Angular 的 Dropzone

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

- Makah