设置“previewsContainer”选项时 Dropzone 类 .dz-started & click 问题答案

【问题标题】：Dropzone class .dz-started & click problems when "previewsContainer" option has been set设置“previewsContainer”选项时 Dropzone 类 .dz-started & click 问题
【发布时间】：2016-04-18 11:31:01
【问题描述】：

我在我的网页上使用 JavaScript Dropzone.js 和以下代码：

Dropzone.options.myDropzone = { 
  previewsContainer: ".dropzone-previews", // ?dz-started
};

<form action="assets/plugins/dropzone/upload.php" class="dropzone" id="my-dropzone">
  <button type="submit" class="btn btn-lg btn-success">ارسال فایل</button>
  <div class="dropzone-previews"></div>               
</form>

我需要进行此配置，因为我尝试在其上安装 Dropzone 的页面是一个工作页面，我希望尽可能地保留以前的代码。但是使用这种配置会出现 2 个问题：
1-当我将文件添加到 Dropzone 时，“dz-started”css 类不会添加到 html dropzone 元素，因此消息“在此处放置文件......”不会消失。
2-当我将多个文件添加到 Dropzone 时，从那一刻起，我在文件缩略图周围的一些点击，并没有打开文件对话框。
请帮帮我，谢谢。

【问题讨论】：

标签： javascript html dropzone.js

【解决方案1】：

不确定这是否是您正在寻找的，但如果您只需要 dropzone 的常规行为和一个按钮来提交丢弃的图像，您可以使用没有预览容器的表单并将提交按钮放在外面，如下所示：

html:

<form action="assets/plugins/dropzone/upload.php" class="dropzone" id="my-dropzone"></form>
<button id="dzsubmit" type="button" class="btn btn-lg btn-success">ارسال فایل</button>

按钮 id 只是为了轻松定位它，以防页面中有更多按钮。

js:

Dropzone.options.myDropzone = { 
    autoProcessQueue: false,
    uploadMultiple: true,
    init: function() {
        var myDropzone = this;
        var submitButton = document.querySelector("#dzsubmit");
        submitButton.addEventListener("click", function () {
            myDropzone.processQueue(); 
        });
    }
};

【讨论】：