设置 "previewsContainer" 选项后,Dropzone class .dz-started 和点击问题
Dropzone class .dz-started & click problems when "previewsContainer" option has been set
我在我的网页上使用 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 class 不会添加到 html dropzone 元素,因此消息 "drop file here. . . " don` t消失了。
2- 当我将多个文件添加到 Dropzone 时,从那时起我在文件缩略图周围的一些点击,不会打开文件对话框。
请帮助我,谢谢。
不确定这是否是您要查找的内容,但如果您只需要 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();
});
}
};
我在我的网页上使用 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 class 不会添加到 html dropzone 元素,因此消息 "drop file here. . . " don` t消失了。
2- 当我将多个文件添加到 Dropzone 时,从那时起我在文件缩略图周围的一些点击,不会打开文件对话框。
请帮助我,谢谢。
不确定这是否是您要查找的内容,但如果您只需要 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();
});
}
};