Dropzone类.dz-started&设置“previewsContainer”选项时单击问题

时间:2016-01-13 13:08:36

标签: javascript html dropzone.js

我在我的网页上使用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的页面是一个工作页面,我希望尽可能多地维护以前的代码。 但是这种配置出现了两个问题:
1-当我向Dropzone添加文件时,“dz-started”css类不会添加到html dropzone元素,因此消息“drop file here ...”不会消失。
2-当我向Dropzone添加多个文件时,从那一刻我点击文件缩略图后的一些点击,不打开文件对话框。
请帮帮我,谢谢。

1 个答案:

答案 0 :(得分:2)

不确定这是否是您正在寻找的,但如果您只需要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(); 
        });
    }
};