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

重现问题后,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)
e8d27ba4a0f2b63c256f37dbcc70963e.png

根据提示,分析是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();      }    });

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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐