如何使用 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; 
}