Question

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

我的dropzone代码如下所示 - ＆gt;

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

  }

};

但我想只使用Previews容器同时使用previewsContainer: '#dropzonePreview'，而不是整个表单来设置Clickable和Drag and Drop。

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

我已经阅读了这个dropzone教程Combine normal form with Dropzone，但这只是我真正想要做的一半。

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

Answer 1

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

关键是将clickable:选项设置为您希望活动Dropzone区域的位置。使用您的示例，如果您希望预览区域也是您的下拉/点击区域，请设置clickable:'#dropzonePreview',，这将使该区域处于活动状态。如果你想要＆＃34; Drop Files＆＃34;在那里显示的图像也使用这个：

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

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

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

Answer 2

或者你可以创建一个programmaticaly的dropzones（即使是非表单元素）通过实例化Dropzone类 http://www.dropzonejs.com/#toc_4

您需要将 dz-clickable 类添加到所需元素。

<强> HTML

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Drop files here to upload</span>
    </div>
</div>

<强>的JavaScript

// Dropzone class:
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

注意

如果收到控制台错误提示：Dropzone already attached，请确保在启动新的Dropzone对象之前添加此行。

Dropzone.autoDiscover = false;

Answer 3

文档说要设置选项：“ clickable：true”，但是...

我的问题是我在上传表单（框）中添加了可见的标记。如果希望框内的每个点都可单击，则视图中不能包含任何其他可见标记，需要将其添加到选项“ dictDefaultMessage”。

如何只使Dropzone.js预览Div可点击而不是整个表格

3 个答案: