如何仅使 Dropzone.js Previews Div 可点击而不是整个表单

我必须使用 dropzone.js 表单，它将几个输入和一个文件上传信息发送到另一个页面。

我的 dropzone 代码如下所示 -->

Dropzone.options.mydropzone = {
  maxFiles: 1,
  maxFilesize: 10, //mb
  acceptedFiles: 'image/*',
  addRemoveLinks: true,
  autoProcessQueue: false,// used for stopping auto processing uploads
  autoDiscover: false,
  paramName: 'prod_pic',
  previewsContainer: '#dropzonePreview', //used for specifying the previews div
  clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box

  accept: function(file, done) {
    console.log("uploaded");
    done();
   //used for enabling the submit button if file exist 
    $( "#submitbtn" ).prop( "disabled", false );
  },

  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!Only One image file accepted.");
        this.removeFile(file);
    });
      var myDropzone = this;
    $("#submitbtn").on('click',function(e) {
       e.preventDefault();
       myDropzone.processQueue();

    });

       this.on("reset", function (file) {   
              //used for disabling the submit button if no file exist 
              $( "#submitbtn" ).prop( "disabled", true );
        });

  }

};

但我只想使预览容器既可单击又可拖放，我已使用它进行了设置previewsContainer: '#dropzonePreview' , 但不是完整的形式.

如果我使用clickable:false我无法单击预览 div 来显示文件上传对话框，即使我将文件拖放到表单上的任何位置也是如此。我不希望发生这种情况，我只想拖放预览容器AND可点击，但同时如果我点击提交，则必须上传整个表单。

我已经阅读了这个 dropzone 教程将普通形式与 Dropzone 结合起来 https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone但这只是我真正想做的一半。

我们有什么办法可以使用 Dropzone 有效地实现这一切吗？

我也一直在研究这个问题，最后偶然发现了答案引导程序 http://www.dropzonejs.com/bootstrap.html page.

关键是设置clickable:选项到您希望活动 Dropzone 区域所在的任何位置。使用您的示例，如果您希望预览区域也是放置/单击区域，请设置clickable:'#dropzonePreview',这将使该区域变得活跃。如果您希望其中显示“删除文件”图像，也可以使用以下命令：

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

这允许您使用单个 Dropzone 表单（因此所有字段都作为一个提交），同时仍然允许您指定一个较小的区域用于放置/单击。

但请注意，不要将其设置得太小，就好像您将其拖放到浏览器中加载图像而不是页面的区域之外一样。