Dropzone.js：无法点击自定义预览

Question

Dropzone.js看起来非常难看（任何人都记得SCSI Voodoo？），或者文档很糟糕：无论是什么原因，我可以尝试100种不同的类和参数组合而且还没有到达任何地方 - 这基本上是我在过去6个小时里所做的。 ：P

我想建立一个自定义的dropzone，因为我不希望整个窗体都是可点击的。我已经在这里呆了两天，真的很近（我想？）。但是，我现在也很困难：我的自定义放置区域不可点击。

我已经把这个变成一个小提琴：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文档中以编程方式创建下拉框。例如，我使用以下内容：

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