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

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

    重现问题后，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();      }    });

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