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

我正在使用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 reach。

使用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

在这里，我们根据以下评论进行更新。

如何在达到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”有多可靠，但这就是click事件函数存在于我当前的dropzone配置中的位置。

Answer 5

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

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

Answer 6

这就是我实现这个目标的方法：

 $('.dz-message').html('Maximum uploads have been reached'); $('.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);