Javascript 如何使用Dropzone.js禁用可单击表单？

我正在使用

Dropzone.js

将文件上载到服务器。我将Dropzone

maxFiles

参数设置为10，并尝试了以下操作：

$('.dropzone').dropzone({
    maxFiles: 10,
    init: function() {
        this.on('maxfilesreached', function() {
            $('.dropzone').unbind('click');
        });
    }
});

---

…但不起作用。从.dropzone中删除clickable的解决方案是什么？或者以任何其他方式阻止用户添加更多文件？

我们开始吧，根据下面的评论进行更新

当到达maxFiles时，如何禁用dropzone“单击打开文件对话框”事件：

$('.dropzone').dropzone({
    maxFiles: 10,
    init: function() {
        this.on('maxfilesreached', function() {
            $('.dropzone').removeClass('dz-clickable'); // remove cursor
            $('.dropzone')[0].removeEventListener('click', this.listeners[1].events.click);
        });
    }

---

我不知道这个.listeners[1]中的“1”有多可靠，但在我当前的dropzone配置中，单击事件函数就存在于此。

dropzone对象上有一个名为

可单击的

的选项字段，默认为

true

---

根据您的场景，您可以在注册Dropzone实例时将其设置为

false

，也可以根据需要在运行时更新该值。

这非常有效！！！并在4.0.1上运行

//disable the click of your clickable area
$(".dz-hidden-input").prop("disabled",true);

//enalbe the click of your clickable area
$(".dz-hidden-input").prop("disabled",false);

---

为什么不使用CSS来禁用单击事件呢。 当达到max files时，Dropzone将自动添加一类

dz max files reached

使用css禁用单击dropzone：

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

如果您有来自服务器的文件，请不要忘记init\u updateMaxFilesReachedClass

myDropzone._updateMaxFilesReachedClass()

---

我就是这样做到的：

$('.dz-message').html('<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i><i>Maximum uploads have been reached</i></span></span></span>');
$('.dropzone').removeClass('dz-clickable');
$('.dropzone')[0].removeEventListener('click', myDropzone.listeners[1].events.click);
$('.dropzone')[0].removeEventListener('drop', myDropzone.listeners[0].events.drop);
$('.dropzone')[0].removeEventListener('dragstart', myDropzone.listeners[0].events.dragstart);
$('.dropzone')[0].removeEventListener('dragenter', myDropzone.listeners[0].events.dragenter);
$('.dropzone')[0].removeEventListener('dragover', myDropzone.listeners[0].events.dragover);
$('.dropzone')[0].removeEventListener('dragleave', myDropzone.listeners[0].events.dragleave);
$('.dropzone')[0].removeEventListener('dragend', myDropzone.listeners[0].events.dragend);

$（'.dz message'）.html（'已达到最大上载量'）；
$（'.dropzone'）.removeClass（'dz-clickable'）；
$（'.dropzone'）[0]。removeEventListener（'click'，myDropzone.listeners[1]。事件。单击）；
$（'.dropzone'）[0]。removeEventListener（'drop'，myDropzone.listeners[0]。events.drop）；
$（'.dropzone'）[0]。removeEventListener（'dragstart'，myDropzone.listeners[0]。events.dragstart）；
$（'.dropzone'）[0]。removeEventListener（'dragenter'，myDropzone.listeners[0]。events.dragenter）；
$（'.dropzone'）[0]。removeEventListener（'dragover'，myDropzone.listeners[0]。events.dragover）；
$（'.dropzone'）[0]。removeEventListener（'dragleave'，myDropzone.listeners[0]。events.dragleave）；
$（'.dropzone'）[0]。removeEventListener（'dragend'，myDropzone.listeners[0]。events.dragend）；

最简单的方法是：myDropzone.disable（）

Dropzone对象具有可单击字段。默认值为true

根据您的场景，您可以将其设置为false

    $('.dropzone').dropzone({
     maxFiles: 10,
     clickable: false,
     init: function() {

     }
   });

---

如果

clickable

选项设置为

true

，则dropzone元素本身将可单击，如果

false

则不可单击任何内容

您还可以传递HTML元素、CSS选择器（用于多个元素）或这些元素的数组。在这种情况下，所有这些元素都将在单击时触发上载

var myDropzone = new Dropzone("div.dropzone", { url: "/file/post", clickable: false });

---

@XuDing的答案很有魅力，但我有一个边缘案例，我想让删除链接保持工作状态，因此添加了一个扩展解决方案

添加以下CSS类

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

---

我只想在用户激活

maxfilesreated

事件后禁用。这对我来说不是一个好的解决方案。我一直在试验

maxfilesextended

，但它似乎是在

maxFiles

被超过后触发的，即，在添加文件11之后。那么

maxfilesReach

事件侦听器呢？当我添加第10个文件时，我认为这是一场火灾。是吗？@zsitro请详细说明解决方案中存在的问题。我不明白。我再次测试了它，它似乎仍然回答了OP的问题。如果你达到max files并且使用此技术，则无法删除一个文件并用另一个文件替换它，这可能是一个用例。这里的更好方法@zsitro Yes。这是一个很酷的方法。但我不明白这是如何禁用可点击表单的（提出的问题）。“我错过了什么？”netdjw问得很好。“可单击”属性似乎也不起作用。您可以设置它，但它不起任何作用。Dropzone仍然可以点击。这对于我想要做的事情来说非常有效。谢谢这应该是公认的答案——这是我见过的最优雅的解决方案。@XuDing极好的答案。多年来，我一直在寻找实现这一目标的方法，但运气不佳。CSS成功了！谢谢。在显示“删除链接”时，请另外使用

.dz Remove{pointer events:all；cursor:default；}

使其可点击。请记住

指针事件

仅适用于IE11及以上版本。。。好吧，只有我一个人不得不在这个糟糕的旧IE版本中蹒跚而行。但尽管如此；）使用此解决方案，我仍然可以将更多文件放入dropzone。这正是我所寻找的。此解决方案不会触发dropbox禁用和启用事件，因此保留上一个会话的历史记录。我已经努力了几个小时，谢谢。最好在这个插件中有“BeforeSelectionFiles”事件

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