如何仅使Dropzone.js预览Div可点击而不是整个表单 [英] How to make only the Dropzone.js Previews Div clickable and not the whole form

问题描述

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

  Dropzone.options.mydropzone = {
 maxFiles：1，
 maxFilesize：10，/ / MB 
 acceptedFiles： '图像/ *'，
 addRemoveLinks：真实，
 autoProcessQueue：假的，//用于停止自动处理上传
自动发现：假，
 paramName：'prod_pic'，
 previewsContainer：'#dropzonePreview'，//用于指定预览div 
 clickable：false，//使用这个但现在我不能点击预览div来显示文件select对话框
 
 accept：function（file，done）{
 console.log（uploaded）; 
 done（）; 
 //用于启用提交按钮，如果文件存在
 $（#submitbtn）.prop（disabled，false）; 
 $，
 
 init：function（）{
 this.on（maxfilesexceeded，function（file）{
 alert（一个图像文件被接受。）; 
 this.removeFile（file）; 
}）; 
 var myDropzone = this; 
 $（＃submitbtn）。on（'click'，function（e）{
 e.preventDefault（）; 
 myDropzone.processQueue（）; 
 
}）; 
 $ b this.on（reset，function（file）{
 //用于在没有文件的情况下禁用提交按钮
 $（#submitbtn）.prop （disabled，true）; 
}）; 
 
} 
 
}; 
  

但是我只想使预览容器都可点击和拖放，我已经设置使用 previewsContainer：'#dropzonePreview'，但不是整个表格。

我使用 clickable：false 我不能点击预览div来显示文件上传对话框，即使我拖放文件它。我不希望这种情况发生，我只是希望预览容器拖动和可点击，但同时如果我点击提交整个表单必须上传。

我已经阅读了这个dropzone教程 Combine与Dropzone的正常形式，但这只是我真正想要做的一半。

有没有什么办法可以使用Dropzone有效地实现所有这些？ 。

解决方案

我一直在研究这个问题，最后偶然发现了bootstrap 页面。

关键是将可点击：选项设置为您希望活动的Dropzone区域的位置。使用你的例子，如果你希望你的预览区域也是你的下拉/点击区域，请设置 clickable：'＃dropzonePreview'，，这将使该区域处于活动状态。如果你想在这里显示Drop Files图片，请使用下面的代码：

 < div id =dropzonePreviewclass =dz-default dz-message> 
< span>将文件放在这里上传< / span> 
< / div> 
  

这允许您使用单一的Dropzone表单（因此所有的字段都被提交为一个）你有一个较小的区域指定滴落/点击。

但是，不要太小，就好像你拖着放在它加载的区域之外在浏览器中的图像代替页面。

I have to use dropzone.js form, which sends a couple of inputs and a file upload info to the other page.

My dropzone code looks like this -- >

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 );
        });

  }

};

But I want to make only the Previews container both Clickable and Drag and Drop ,which I have set by using previewsContainer: '#dropzonePreview' , but not the whole form.

If I use clickable:false I wont be able to click on previews div to show the file upload dialog box and also even if I drag n drop the file anywhere on the form it takes it. I dont want that to happen I just want the Previews container to be drag n drop AND Clickable but at the same time if I click on submit the whole form must get uploaded.

I have read this dropzone tutorial Combine normal form with Dropzone but thats just the half of what i actually want to do.

Is there any way we can achieve all of this using Dropzone efficiently ?.

解决方案

I have been working on this as well and finally stumbled across the answer on the bootstrap page.

The key is setting the clickable: option to wherever you want your active Dropzone area to be. Using your example, if you want your preview area to also be your drop/click area, set clickable:'#dropzonePreview', and that will make that area active. If you want the "Drop Files" image displayed in there as well use this:

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

This allows you to use a single Dropzone form (thus all fields get submitted as one) while still allowing you to have a smaller area designated for dropping/clicking.

One note though, don't make it too small, as if you drag and drop outside the area it loads the image in the browser in place of the page.

这篇关于如何仅使Dropzone.js预览Div可点击而不是整个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！