Javascript 如何修复此“Dropzone 已附加”错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33076495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I fix this "Dropzone already attached" error?
提问by Marius
I have this sample:
我有这个样本：
I managed to create this form but unfortunately it does not work because I get error.
我设法创建了这个表单，但不幸的是它不起作用，因为我收到错误。
Dropzone already attached.
CODE HTML:
代码 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:
代码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" });
I set up Dropzone.autoDiscover = false;but unfortunately still not working.
我设置了 Dropzone.autoDiscover = false;但不幸的是仍然无法正常工作。
Can you please tell me what is causing this problem?
你能告诉我是什么导致了这个问题吗？
采纳答案by drys
You should use either
你应该使用
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});
or
或者
$("div#myDrop").dropzone({ url: "/file/post" });
not both. Basically what you are doing is calling the same thing twice.
不是都。基本上你正在做的是两次调用同一件事。
回答by Syed
Defining below code globally will help:
全局定义以下代码将有所帮助：
Dropzone.autoDiscover = false;
回答by inmyth
This error can also happen when an element has already had a class dropzone.
当元素已经有一个 class 时，也会发生此错误dropzone。
However if this is removed then for some reason the default style will not apply after Dropzone is initiated. My only workaround is to create a custom style for that element.
但是，如果将其删除，则出于某种原因，在启动 Dropzone 后将不会应用默认样式。我唯一的解决方法是为该元素创建自定义样式。
回答by Chung Nguy?n Tr?n
<script>
Dropzone.autoDiscover = false;
$(document).ready(function() {
var myDrop= new Dropzone("#myDrop", {
url: '/admin/media'
});
});
</script>
instead of
代替
<script>
$(document).ready(function() {
Dropzone.autoDiscover = false;
var myDrop= new Dropzone("#myDrop", {
url: '/admin/media'
});
});
</script>
回答by Agung Panduan
Add Dropzone.autoDiscover = falsebefore $(document).readylike this:
像这样Dropzone.autoDiscover = false在前面添加$(document).ready：
Dropzone.autoDiscover = false;
$(document).ready(function () {
});
回答by George John
After searching and trying several solution on the net, here I got one of the best solutions for solving this issue.
在网上搜索并尝试了几种解决方案后，在这里我得到了解决此问题的最佳解决方案之一。
HTML
HTML
<div id="some-dropzone" class="dropzone"></div>
JavaScript
JavaScript
Dropzone.options.someDropzone = {
url: "/file/post"
};
回答by Hymany Supit
I fixed this issue by editing the dropzone.js. just go to dropzone.js and replace
我通过编辑 dropzone.js 解决了这个问题。只需转到 dropzone.js 并替换
if (this.element.dropzone) {
throw new Error("Dropzone already attached.");
}
with
和
if (this.element.dropzone) {
return this.element.dropzone;
}
this solution is originally found by Haskaalo, posted on the github issues
此解决方案最初由Haskaalo发现，发布在github 问题上
回答by tsuz
This is my hackish workaround. It basically checks if dropzone is loaded as DOM, and if it has not, then it will create one.
这是我的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({
...
...
});
UPDATE: It is suggested to figure out why the dropzone is initiated twice. Fixing that is the right way, and this answer is only a technically-debtfulworkaround.
更新：建议找出 dropzone 启动两次的原因。解决这个问题是正确的方法，这个答案只是一个技术上欠债的解决方法。
回答by Eli
This solution did not work for me when using Angular:
使用 Angular 时，此解决方案对我不起作用：
Dropzone.autoDiscover = false;
The only way I could get it to work with Angular without having to edit the dropzone.jsfile was this:
我可以让它与 Angular 一起使用而无需编辑dropzone.js文件的唯一方法是：
@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);
回答by Yunay Hamza
You can concat your id "myDrop" with some unique value for every single instance of Dropzone.
对于 Dropzone 的每个实例，您可以将您的 id "myDrop" 与一些唯一值连接起来。
Example:
例子：
html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>
in func:
this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);
