我有这个样本:
我设法创建了这个表单,但遗憾的是它不起作用,因为我收到了错误。
Dropzone already attached.
代码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>
CODE JS:
Dropzone.autoDiscover = false;
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.autoDiscover = false;
,但遗憾的是仍无法正常工作。
你能告诉我导致这个问题的原因吗?
答案 0 :(得分:119)
全局定义以下代码将有助于:
Dropzone.autoDiscover = false;
答案 1 :(得分:14)
你应该使用
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});
或
$("div#myDrop").dropzone({ url: "/file/post" });
不是两个。基本上你正在做的是两次调用相同的东西。
答案 2 :(得分:8)
在Dropzone.autoDiscover = false
之前添加$(document).ready
,
Dropzone.autoDiscover = false;
$(document).ready(function () {
});
答案 3 :(得分:5)
当元素已经有一个类dropzone
时,也会发生此错误。
但是,如果将其删除,则由于某种原因,默认样式将在启动Dropzone后不适用。我唯一的解决方法是为该元素创建自定义样式。
答案 4 :(得分:4)
在网上搜索并尝试了几个解决方案后,我得到了解决此问题的最佳解决方案之一。
HTML
<div id="some-dropzone" class="dropzone"></div>
的JavaScript
Dropzone.options.someDropzone = {
url: "/file/post"
};
答案 5 :(得分:3)
这是我的hackish解决方法。它基本上检查dropzone是否作为DOM加载,如果没有,则会创建一个。
function dropzoneExists(selector) {
var elements = $(selector).find('.dz-default');
return elements.length > 0;
}
var exists = dropzoneExists('div#photo_dropzone');
if(exists) return;
$('div#photo_dropzone').dropzone({
...
...
});
更新:建议找出为什么dropzone启动两次。修复这是正确的方法,这个答案只是技术上负债的解决方法。
答案 6 :(得分:3)
<script>
Dropzone.autoDiscover = false;
$(document).ready(function() {
var myDrop= new Dropzone("#myDrop", {
url: '/admin/media'
});
});
</script>
代替
<script>
$(document).ready(function() {
Dropzone.autoDiscover = false;
var myDrop= new Dropzone("#myDrop", {
url: '/admin/media'
});
});
</script>
答案 7 :(得分:2)
我通过编辑dropzone.js修复了这个问题。只需转到dropzone.js并替换
library(forcats)
library(ggplot2)
ggplot(mtcars, aes(fct_infreq(as.factor(cyl)), mpg)) + geom_boxplot()
# Count of each cylinder type
table(mtcars$cyl)
# 4 6 8
# 11 7 14
与
if (this.element.dropzone) {
throw new Error("Dropzone already attached.");
}
此解决方案最初由Haskaalo发现,发布在github issues
上答案 8 :(得分:1)
使用Angular时,此解决方案不适用于我:
Dropzone.autoDiscover = false;
我无需编辑dropzone.js
文件就可以与Angular一起使用的唯一方法是:
@ViewChild('containerElement') containerElement: ElementRef;
...
/* Make sure all Dropzone instances are destroyed */
if (Dropzone.instances.length > 0) {
Dropzone.instances.forEach((e: any) => {
e.off();
e.destroy();
});
}
/* Remove existing dropzone element from the DOM */
const element: any = document.getElementById('my-dropzone');
element.remove();
/* Create new dropzone DOM element */
const html =
` <div id="my-dropzone" class="dropzone">` +
`<div class="dz-message">` +
`<i class="fad fa-cloud-upload-alt dz-message-icon"></i>` +
`<p>Drop files, or click to browse</p>` +
`</div>` +
`</div>`;
this.containerElement.nativeElement.insertAdjacentHTML('beforeend', html);
答案 9 :(得分:0)
有时是因为您有两个具有相同ID dropzone
的html元素。
<div id="dropzone" class="dropzone"></div>
<div id="dropzone" class="dropzone"></div>
答案 10 :(得分:0)
对于Dropzone的每个实例,您都可以使用一些唯一值来合并ID“ myDrop”。
示例:
html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>
in func:
this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);
答案 11 :(得分:0)
转到 dropzone.js 并替换 if(n.element.dropzone) throw new Error("Dropzone already attach."; with if(n.element.dropzone) return this.element.dropzone;