如何修复此“拖放区已连接”错误
How can I fix this "Dropzone already attached" error?
我有这个样本:
链接
我设法创建了此表单,但不幸的是它不起作用,因为我收到错误。
Dropzone already attached.
代码网页:
<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>
代码 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;
但不幸的是仍然无法正常工作。
你能告诉我是什么导致了这个问题吗?
全局定义以下代码会有所帮助:
Dropzone.autoDiscover = false;
$(document).ready
之前添加Dropzone.autoDiscover = false
,如下所示:
Dropzone.autoDiscover = false;
$(document).ready(function () {
});
你应该使用任何一个
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});
或
$("div#myDrop").dropzone({ url: "/file/post" });
不能两者兼而有之。基本上你正在做的是两次调用同一件事。
当元素已经具有类dropzone
时,也会发生此错误。
但是,如果将其删除,则由于某种原因,启动 Dropzone 后默认样式将不适用。我唯一的解决方法是为该元素创建自定义样式。
<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>
在网上搜索并尝试了几种解决方案后,我在这里得到了解决此问题的最佳解决方案之一。
.HTML
<div id="some-dropzone" class="dropzone"></div>
JavaScript
Dropzone.options.someDropzone = {
url: "/file/post"
};
这是我的黑客解决方法。它基本上检查 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({
...
...
});
更新:建议找出为什么放置区启动两次。解决这个问题是正确的方法,这个答案只是一个技术上需要帮助的解决方法。
使用 Angular 时,此解决方案对我不起作用:
Dropzone.autoDiscover = false;
我可以让它与 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);
我通过编辑拖放区解决了这个问题.js只需转到拖放区.js并替换
if (this.element.dropzone) {
throw new Error("Dropzone already attached.");
}
跟
if (this.element.dropzone) {
return this.element.dropzone;
}
这个解决方案最初是由Haskaalo发现的,发布在github问题上
有时是因为您有两个具有相同ID的html元素dropzone
。
<div id="dropzone" class="dropzone"></div>
<div id="dropzone" class="dropzone"></div>
您可以将您的 id "myDrop" 与每个 Dropzone 实例的一些唯一值连接起来。
例:
html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>
in func:
this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);
转到 dropzone.js 并替换 if(n.element.dropzone( 抛出新的错误("Dropzone 已附加"; 使用 if(n.element.dropzone( 返回 this.element.dropzone;
- JavaScript和Java WebSocket SSL连接错误
- 模拟连接错误
- 在javascript中调用seam远程函数时处理连接错误
- 解决节点中的“本地主机意外关闭连接”错误
- '套接字连接错误'在Aptana 3上调试PHP/JS时
- 异常:“远程主机关闭了连接.错误代码为 0x80070057”
- Javascript 字符串连接错误
- Esri 和 Python 之间的连接错误
- Mirth 连接错误:“..不是 XML 对象“时尝试从数组输出文本
- SoundCloud Javascript API SC.连接错误
- 如何修复长轮询未完成连接错误
- Firebase - 处理最大并发连接错误数(免费方案)
- 第二个请求的节点mysql连接错误
- 处理同步XHR连接错误
- MongoDB与NodeJS连接错误
- 处理连接错误事件
- 序列化连接错误
- 如何修复此“拖放区已连接”错误
- Firefox 3.6上的JavaScript字符串连接错误
- 如何调试节点+ mongo连接错误