Question

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

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

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

Answer 1

为什么不使用CSS来禁用click事件。达到最大文件后，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

我们根据以下评论进行更新。

如何禁用dropzone＆＃34;点击打开文件对话框＆＃34;达到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);
        });
    }

我不知道＆＃34; 1＆＃34;在this.listeners[1]中，但是点击事件功能存在于我当前的dropzone配置中。

Answer 6

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

Answer 7

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

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

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

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

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

10 个答案: