Dropzone.js : 맞춤 미리보기를 클릭 할 수 없음

Question

Dropzone.js는 매우 까다롭기 만합니다. (누구나 SCSI Voodoo를 기억하십니까?) 또는 문서가 악취가 나는 것 같습니다. 이유가 무엇이든간에 나는 100 가지의 클래스 및 매개 변수 조합을 시도 할 수 있습니다. 아직도 어디에도 가지 않습니다 - 이것은 기본적으로 제가 지난 6 시간 동안 해왔 던 것입니다. : P

전체 폼을 클릭 할 수 없기 때문에 사용자 정의 드롭 존을 만들려고합니다. 나는 이틀 동안이 일을하고 있었고 정말 가까웠다 (나는 생각 하는가?). 그러나, 나는 또한 정말 붙어있어 : 내 사용자 지정 드롭 영역을 클릭 할 수 없습니다.

나는 바이올린이 점을 넣어했습니다 http://jsfiddle.net/timgavin/Labn3qg4/

<form id="form-post-photo" method="post" enctype="multipart/form-data" role="form" accept-charset="UTF-8"> 
    <div class="dropzone dz-clickable dz-default dz-file-preview" id="previews"> 
     <div class="dz-message"> 
      <h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select 
     </div> 
    </div> 
    <div class="form-group"> 
     <input type="text" name="caption" id="caption" class="form-control" placeholder="Caption (optional)"> 
    </div> 
    <button type="button" id="btn-clear" class="btn btn-danger">Clear</button> 
    <button type="submit" id="btn-submit" class="btn btn-default">Upload</button> 
</form> 

---

<script> 
Dropzone.autoDiscover = false; 

Dropzone.options.formPostPhoto = { 

    url: 'file-upload.php', 
    paramName: 'photo', 
    autoProcessQueue: false, 
    //uploadMultiple: true, 
    parallelUploads: 4, 
    maxFiles: 4, 
    maxFileSize: 1, 
    acceptedFiles: 'image/*', 
    previewsContainer: '#previews', 
    clickable:'.dz-clickable', 

    init: function() { 

     var submitButton = document.querySelector("#btn-submit") 
     var myDropzone = this; 

     // remove extra images 
     myDropzone.on('maxfilesexceeded', function(file) { 
      this.removeFile(file); 
     }); 

     // tell dropzone to process all queued files. 
     submitButton.addEventListener("click", function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
     }); 

     // add a remove button to each image 
     this.on('addedfile', function(file,maxFileSize) { 
      var removeButton = Dropzone.createElement('<i class="glyphicon glyphicon-trash text-danger"></i>'); 
      var _this = this; 

      // Listen to the click event 
      removeButton.addEventListener("click", function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       _this.removeFile(file); 
      // If you want to the delete the file on the server as well, you can do the AJAX request here. 
      }); 

      // Add the button to the file preview element. 
      file.previewElement.appendChild(removeButton); 
     }); 

     // show the submit button only when a photo has been added 
     this.on('addedfile', function() { 
      $('#btn-submit').removeClass('hide').show(); 
      $('#btn-clear').removeClass('hide').show(); 
     }); 

     this.on('sending', function(file) { 
      //alert('Sending the file' + file.name) 
     }); 

     this.on('queuecomplete', function(file) { 
      alert('All files have been uploaded!') 
     }); 

     // Setup the observer for the button. 
     var _this = this; 
     $('#btn-clear').on('click', function() { 
      // Using "_this" here, because "this" doesn't point to the dropzone anymore 
      _this.removeAllFiles(); 
      _this.removeAllFiles(true); 
     }); 
    } 
}; 
</script> 

Answer 1

그것은 당신이없이 게시 위치를 모르는 DROPZONE으로 요구되는 URL 옵션을 누락되었습니다 수 있습니다 액션 속성.

을 참조하십시오. 드롭 존 문서에서 드롭 존을 프로그래밍 방식으로 생성하십시오 (). 예를 들어 다음을 사용하고 있습니다.

<form>  
<div class="dropzone dz-default dz-file-preview dz-clickable" id="my-dropzone"> 
      <label class="message dz-message"> 
       <h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select 
      </label> 
     </div> 
     </form> 
     <button id="submit-all"> 
      Submit all files 
     </button> 
     <script src="{{ STATIC_URL }}js/dropzone.js"></script> 
     <script type="text/javascript"> 
      $("div#my-dropzone").dropzone({ url: "/planner/create" }) 
       Dropzone.options.myDropzone = { 

        // Prevents Dropzone from uploading dropped files immediately 
        autoProcessQueue : false, 

        init : function() { 
         var submitButton = document.querySelector("#submit-all") 
         myDropzone = this; 
         $("#submit-all").hide(); 

         submitButton.addEventListener("click", function() { 
          myDropzone.processQueue(); 
          // Tell Dropzone to process all queued files. 
         }); 

         // You might want to show the submit button only when 
         // files are dropped here: 
         this.on("addedfile", function() { 
          $("#submit-all").show(); 
          // Show submit button here and/or inform user to click it. 
         }); 

        } 
       }; 
     </script>