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

Question

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

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

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

Answer 1

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

使用 css 禁用单击 dropzone：

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

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

Answer 3

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

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

myDropzone._updateMaxFilesReachedClass()

Answer 4

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

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

Answer 5

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

Answer 6

如果clickable选项设置为true ，则 dropzone 元素本身将是可点击的，如果为false什么都不可点击。

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

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

Answer 7

我们开始了，根据下面的评论更新。

如何在达到 maxFiles 时禁用放置区“单击打开文件对话框”事件：

$('.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 配置中单击事件函数所在的位置。

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

Answer 9

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

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

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

     }
   });

Answer 10

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

添加以下 CSS 类

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