web-dev-qa-db-ja.com

Dropzone.jsでフォームをクリック可能を無効にする方法は？

Dropzone.jsを使用してファイルをサーバーにアップロードしています。 Dropzone maxFilesパラメーターを10に設定し、これを試しました。

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

...しかし機能していません。 .dropzoneからクリック可能ファイルを削除する解決策、またはユーザーがファイルを追加できないようにするその他の方法は何ですか？

javascriptjquerydropzone.js
13
netdjw

CSSを使用してクリックイベントを無効にしてみませんか。最大ファイル数に達すると、Dropzoneは自動的にdz-max-files-reachedのクラスを追加します。

Cssを使用して、ドロップゾーンのクリックを無効にします。

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

これは完璧に機能します!!! 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);
12
Dave Geurts
myDropzone.on('maxfilesreached', function() {
    myDropzone.removeEventListeners();
});
myDropzone.on('removedfile', function (file) {
    myDropzone.setupEventListeners();
});

サーバーからのファイルがある場合は、init_updateMaxFilesReachedClassを忘れないでください。

myDropzone._updateMaxFilesReachedClass()
7
Alexandr Danielyan

Dropzoneオブジェクトにはclickableというオプションフィールドがあります。デフォルトはtrueです。

シナリオに応じて、Dropzoneインスタンスを登録するときにこれをfalseに設定するか、必要に応じて実行時に値を更新できます。

2
Jeff Panici

以下のコメントに基づいて更新しました。

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」の信頼性はわかりませんが、現在のドロップゾーン構成でクリックイベント関数が存在する場所です。

1
bloodyKnuckles

最も簡単な方法は次のとおりです。myDropzone.disable（）;

1
John Elliott

これが私がこれを達成した方法です：

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