jquery 上传文件_Dropzone.js文件拖拽上传提示Dropzone already attached 解决
·
最近收到客户的反馈,在操作上传文件有时会出现没有任何。大部分时间是正常。
重现问题后,f12打开后台控制台发现如下提示:
Uncaught Error: Dropzone already attached. at new b (dropzone.min.js:1) at HTMLSpanElement. (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 (jquery.min.js:2), :44:22) at HTMLDocument.eval (eval at (jquery.min.js:2), :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(); } });
按照如上修改,问题解决。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)