如何动态更改 dropzone 中的 maxFiles？答案

【问题标题】：How can change maxFiles in dropzone dynamically?如何动态更改 dropzone 中的 maxFiles？
【发布时间】：2018-03-07 04:27:16
【问题描述】：

我的项目中有一个选择选项元素，有两个选项，书籍和图像。对于书籍选项，我想只允许上传单个文件。但是对于图像选项，我需要允许多个文件选择。我正在尝试这种方式但没有成功：

 Dropzone.options.frmMediaDropzone = {
   maxFilesize: 99,
   acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf",
   parallelUploads: 1,
   addRemoveLinks: true,
   maxFiles: 100,
   init: function() {
     myDropzone = this;
     this.on("removedfile", function(file) {
       console.log(file);
     });

     this.on("success", function(file, response) {
       console.log(response.imageName);
     });
   }
 };

在选项更改时，我正在尝试这个：

Dropzone.options.frmMediaDropzone.maxFiles = 1;

但它不起作用。如果有人有想法，请帮忙。

【问题讨论】：

标签： javascript jquery dropzone

【解决方案1】：

试试这个方法来解决你的问题，

你需要在javascript中定义一个变量。

var myDropZone;

在init() 事件中初始化myDropZone 变量。

init: function() {

    myDropzone = this;
}

myDropzone 变得可访问，因此声明

myDropzone.options.maxFiles = 1;

文件上传完成后设置clickable:false，

myDropzone.options.clickable = false;

超过最大文件限制后手动删除文件。

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

【讨论】：

Thankx Mayank，我刚刚尝试并发现它的工作方式仍然允许多个文件但只上传第一个文件。总比没有好，但是dropzone是否可能只允许单个文件？当我手动设置 maxFiles=1 时，它只允许单个文件，但它不能动态工作，用户仍然可以选择多个文件。
刚刚检查过，但即使手动操作，uploadMultiple 也无法动态工作。我想知道只有通过手动设置 maxFiles=1 才能删除多个属性。
我已经检查并发现它正在工作，但作为一种解决方法。因为用户仍然可以选择多个图像。选择多个图像可能会让最终用户感到困惑。但是非常感谢您的帮助，因为我通过您的回答学到了很多新东西。目前，我通过实施 Ryan 的答案来满足我的要求。
如果您的问题还没有解决，您可以在单次上传完成后设置 clickable:false。
非常感谢，但是通过将 id 添加到隐藏输入然后访问该 id 并删除多个属性来解决问题。

【解决方案2】：

有两种方法可以做到这一点。您可以动态创建您的 dropzone，然后使用 .attr 更改它的属性，或者在定义 dropzone 时在您的 init 属性中创建一个侦听器事件。

有关类似示例，请参阅此链接（请参阅第二个答案）： Dropzone: change acceptedFiles dynamically

【讨论】：

谢谢瑞恩，我认为这会有所帮助。但是我在同一页面上有两个 dropzonez 并且都具有相同的类。是否可以为输入分配名称以获得特定输入？
不要使用类选择器，而是使用 id 选择器。 $('#myid') 而不是 $('.myclass')。
是的，但我问的是如何将 id 设置为隐藏输入，因为隐藏输入是由 dropzone 生成的。以下是这两个没有 id 或名称的隐藏输入：
我不确定我是否完全理解您的意思。在您的 html 中，您将有一个用于放置区域的表单，因此您可以使用该 ID。如果你动态创建一个dropzone，你可以将它分配给一个变量，然后使用那个变量。
是的 Ryan，我的表单有一个 id，但 dropzone 在表单之外生成隐藏的输入文件元素，因此表单 id 无能为力。但无论如何，根据你的建议，我通过在 dropzone init: 函数中添加这一行来将 id 分配给隐藏的输入：this.hiddenFileInput.setAttribute("id", "fileMedia");现在其他事情很容易，因为我通过在选项更改时使用此 id 删除了多个属性。非常感谢您的热心帮助。