2014-06-12 4 views
10

Dropzone.js을 사용하여 파일을 서버에 업로드하고 있습니다. 나는 10에 내 DROPZONE maxFiles 매개 변수를 설정하고이 시도되었다Dropzone.js를 사용하여 양식을 클릭 할 수 없게하는 방법?

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

을 ...하지만 작동하지 않습니다. .dropzone 또는 다른 방법으로 사용자가 더 많은 파일을 추가하지 못하도록 클릭 할 수있는 솔루션은 무엇입니까?

+1

더 나은 방법 여기 http://stackoverflow.com/a/19057630/1178072 – zsitro

+0

@zsitro 예. 멋진 접근 방법입니다. 그러나 나는 그것이 어떻게 클릭 가능한 형태 (질문이 제기 됨)를 불가능하게하는지 보지 못한다. 내가 뭘 놓치고 있니? – bloodyKnuckles

+1

@netdjw 훌륭한 질문입니다. 클릭 가능한 속성이 작동하지 않는 것 같습니다. – kstratis

답변

1

아래의 설명에 따라 업데이트 해 드리겠습니다.

$('.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을 해제하는 방법 MAXFILES에 도달하면 이벤트 "파일 대화 상자를 엽니 다" 이벤트 기능은 현재의 dropzone 구성에 있습니다.

+0

사용자가 'maxfilesreached' 이벤트를 활성화 한 후에 만 ​​비활성화하고 싶습니다. 이것은 나를위한 좋은 해결책이 아닙니다. – netdjw

+0

나는'maxfilesexceeded'을 실험 해 왔지만,'maxFiles'를 초과 한 후에, 즉 파일 # 11을 추가 한 후에 발생하는 것처럼 보입니다. – bloodyKnuckles

+0

그리고'maxfilesreached' 이벤트 리스너는 무엇입니까? 나는 이것이 10 번째 파일을 추가 할 때 불이 올 것이라고 생각한다. 예? – netdjw

2

clickable이라는 Dropzone 개체의 옵션 필드는 기본값이 true입니다.

시나리오에 따라 Dropzone 인스턴스를 등록 할 때 false으로 설정하거나 필요에 따라 런타임에 값을 업데이트 할 수 있습니다.

+1

이 설정은 가능하지만 아무것도 수행하지 않습니다. Dropzone은 클릭 할 수 있습니다. –

9

이것은 완벽하게 작동합니다! 작동 중 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); 
+1

이것은 정확히 내가 무엇을 찾고 있었는지 – ChrisB

+0

나를 위해 트릭을 한 것 +1 – Eman

23

CSS를 사용하여 클릭 이벤트를 사용하지 않는 이유는 무엇입니까? 최대 파일에 도달하면 Dropzone은 자동으로 dz-max-files-reached 클래스를 추가합니다.

사용 CSS는 DROPZONE에 클릭을 해제합니다 : 당신이 당신의 서버에서 파일이있는 경우 .dz-max-files-reached { pointer-events: none; cursor: default; }

+0

이것은 받아 들여진 대답이어야합니다 - 이것이 내가 보아온 가장 우아한 해결책입니다. – huwiler

+0

@XuDing 우수 답변. 나이를 먹을 수있는 방법을 찾고 있었지만 운이 없었습니다. CSS가 트릭을 만들었습니다! 고맙습니다. – kstratis

+4

"링크 제거"를 표시 할 때'.dz-remove {pointer-events : all; 커서 : 기본; } '을 클릭하여 계속 클릭 할 수있게합니다. – Atan

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

이 _updateMaxFilesReachedClass init을 잊지 마세요.

myDropzone._updateMaxFilesReachedClass()