如何使用 Dropzone.js 禁用可点击的表单？答案

【问题标题】：How to disable clickable the form with Dropzone.js?如何使用 Dropzone.js 禁用可点击的表单？
【发布时间】：2014-08-03 07:24:42
【问题描述】：

我正在使用Dropzone.js 将文件上传到服务器。我将我的 Dropzone maxFiles 参数设置为 10，我尝试过这个：

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

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

【问题讨论】：

这里有更好的方法stackoverflow.com/a/19057630/1178072
@zsitro 是的。这是一个很酷的方法。但我不明白这如何禁用可点击表单（提出的问题）。我错过了什么？
@netdjw 很好的问题。 clickable 属性似乎也不起作用。

标签： javascript jquery dropzone.js

【解决方案1】：

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

使用 css 禁用对 dropzone 的点击：

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

【讨论】：

这应该是公认的答案——这是我见过的最优雅的解决方案。
@XuDing 很好的答案。我一直在寻找一种方法来实现这一目标，但没有运气。 CSS 成功了！谢谢。
当显示“删除链接”时，额外使用.dz-remove { pointer-events: all; cursor: default; } 以保持它们可点击。
请记住 pointer-events 仅适用于 IE11 及更高版本...好吧，只有我不得不在这个糟糕的旧 IE 版本中磕磕绊绊。但是虽然;)
使用此解决方案，我仍然可以将更多文件拖放到 dropzone。

【解决方案2】：

这非常有效！！！并适用于 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);

【讨论】：

这正是我想要的
这不会触发 Dropbox 禁用和启用事件，因此会保留上一个会话的历史记录。
我已经挣扎了好几个小时了，谢谢。在这个插件中有“beforeSelectingFiles”事件会更好

【解决方案3】：

myDropzone.on('maxfilesreached', function() {
    myDropzone.removeEventListeners();
});
myDropzone.on('removedfile', function (file) {
    myDropzone.setupEventListeners();
});

如果您有来自服务器的文件，请不要忘记初始化 _updateMaxFilesReachedClass。

myDropzone._updateMaxFilesReachedClass()

【讨论】：

【解决方案4】：

Dropzone 对象上有一个名为clickable 的选项字段，默认为true。

根据您的情况，您可以在注册 Dropzone 实例时将其设置为 false，也可以根据需要在运行时更新该值。

【讨论】：

你可以设置这个，但它什么也不做。 Dropzone 仍然可以点击。
这非常适合我想做的事情。谢谢！

【解决方案5】：

最简单的方法是：myDropzone.disable();

【讨论】：

【解决方案6】：

如果clickable 选项设置为true，则dropzone 元素本身将是可点击的，如果false 将不会点击任何内容。

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

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

【讨论】：

【解决方案7】：

开始吧，根据下面的 cmets 更新。

当达到 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);
        });
    }

我不知道this.listeners[1] 中的“1”有多可靠，但这就是点击事件函数在我当前的 dropzone 配置中存在的地方。

【讨论】：

我只想在用户激活maxfilesreached 事件后禁用。这对我来说不是一个好的解决方案。
我一直在尝试使用 maxfilesexceeded，但它似乎在超过 maxFiles 之后触发，即添加文件 #11 之后。
那么maxfilesreached 事件监听器呢？当我添加第 10 个文件时，我认为这起火了。是吗？
@zsitro 请详细说明您在解决方案中遇到的问题。我不明白。我再次对其进行了测试，它似乎仍然可以回答 OP 的问题。
如果达到最大文件数并且使用此技术，则无法删除文件并将其替换为另一个可能是用例的文件。

【解决方案8】：

我是这样实现的：

$('.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);

【讨论】：

【解决方案9】：

Dropzone 对象具有可点击的字段。该默认值为 true。

根据您的情况，您可以将其设置为 false。

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

     }
   });

【讨论】：

【解决方案10】：

@XuDing 的回答就像一个魅力，但我有一个边缘情况，我想保持删除链接的工作，所以为此添加一个扩展的解决方案。

在下面添加 CSS 类

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

【讨论】：