Dropzone.js文件拖拽上传提示Dropzone already attached 解决

最新推荐文章于 2024-05-27 15:55:57 发布

程序员进进

最新推荐文章于 2024-05-27 15:55:57 发布

阅读量3.4k

点赞数

分类专栏：服务器优化文章标签： jquery bootstrap javascript

本文链接：https://blog.csdn.net/jinxhj2010/article/details/107683026

版权

服务器优化专栏收录该内容

8 篇文章

订阅专栏

在使用Dropzone.js实现文件拖拽上传时，遇到' Dropzone already attached'的错误提示，该问题源于Dropzone多次初始化。通过检查代码发现，错误发生在Bootstrap modal组件动态加载时重复初始化Dropzone。尝试网上提供的解决方案，如设置`autoProcessQueue: false`并未奏效。最终发现是由于使用jQuery创建Dropzone实例，改为使用原生方法创建并添加`destroy`方法调用，成功解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近收到客户的反馈，在操作上传文件有时会出现没有任何。大部分时间是正常。

重现问题后，f12打开后台控制台发现如下提示：

Uncaught Error: Dropzone already attached.    at new b (dropzone.min.js:1)    at HTMLSpanElement.<anonymous> (dropzone.min.js:2)    at Function.each (jquery.min.js:2)    at m.fn.init.each (jquery.min.js:2)    at m.fn.init.undefined.jQuery.fn.dropzone (dropzone.min.js:2)    at Object.orderRegisterReceivevoucher.init (eval at <anonymous> (jquery.min.js:2), <anonymous>:44:22)    at HTMLDocument.eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:172:31)    at j (jquery.min.js:2)    at Object.add [as done] (jquery.min.js:2)

根据提示，分析是Dropzone多次初始化导致。打开原代码检查问题，该界面通过bootstrap的modal组件动态加载，每次加载后上传实例重复初始化。

$(".file_up_load").dropzone({           url: "/amanager/home/uploadFile.htm",//传到文件服务器          addRemoveLinks: true,                  autoProcessQueue: true,          uploadMultiple: true,          parallelUploads: 10,          dictDefaultMessage:"请将要上传的图片放至该目录下",          ictResponseError: '文件上传失败!',          acceptedFiles: ".jpg,.gif,.png",          dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.jpg,*.gif,*.png。",          dictFallbackMessage:"浏览器不受支持",          dictFileTooBig:"文件过大上传文件最大支持.",           .....

按照网上的提示增加如下设置仍没有效果：

Dropzone.autoDiscover = false;$('#Modal').on('hidden.bs.modal', function () { applyZone.destroy();});

通过以上代码虽然没有解决问题，但大部分能知道解决问题的办法即窗口关闭后将该对象销毁。于是有了如下代码。

var applyZone = $(".file_up_load").dropzone ....$('#content_body_option').on('click',"button.close", function () {      if(applyZone){        applyZone.destroy();      } });

测试后提示对象没有destroy方法。继续分析代码，原来创建dropzone使用的jquery对象创建。改用原生方法创建上传对象，改造后代码如下：

Dropzone.autoDiscover = false;    var applyZone = new Dropzone("#file_up_load_temp_register"    ...    $('#content_body_option').on('click',"button.close", function () {      if(applyZone){        applyZone.destroy();      }    });

按照如上修改，问题解决。