javascript - 无法在 dropzone 中添加事件处理程序

Question

我正在创建一个在单击按钮时调用的 addDropzone() 函数，该函数会传递一个值，因为需要多个 dropzone 元素，但一次只需要一个，但在不同的 div 上，因此函数中的“val”参数有助于定义 div id。我能够运行 dropzone 元素。它还将文件保存在服务器上，但我无法使事件处理程序正常工作。

这是我正在使用的功能。

此外，如果有人可以建议我一种在事件处理程序中读取服务器消息的方法

JAVASCRIPT 代码

    function addDropzone(val){
    document.getElementById("div2").innerHTML = '<div class="item" style="width:96%; margin:5px auto; position:relative; height: auto; background-color:lightgray;"><form action="file-upload.php" class="dropzone" id="my-dropzone-'+val+'"></form></div>';        
    var myDropzone = new Dropzone("div #my-dropzone-"+val);     
    Dropzone.options.myDropzone = {
            paramName: 'file',
            method: 'post',
            maxFiles: 1,
            url: 'file-upload.php',
            dictDefaultMessage: "Drag your images",
            clickable: false,
            maxFilesize: 512,
            uploadMultiple: false,
            addRemoveLinks: true,
            forceFallback:true      
    };
    Dropzone.options.myDropzone = false;
    Dropzone.options.myDropzone.enable();

    Dropzone.options.myDropzone = {
        init: function(){
        this.on("maxfilesexceeded", function(file) { alert("File limit 1"); });
        this.on("complete", function(file) {alert(serverReponse);});
        }
    };

}

Answer 1

不知道 dropzone，但据我了解文档，我会这样写:

function addDropzone(val){
  var dropZoneId= "my-dropzone-"+val;
  // this line has moved-up, and the option is not referenced in the same way
  Dropzone.options[dropZoneId] = false;
  // proper way of adding new content to div2 without losing event handlers
  var div = document.createElement('div');
  div.innerHTML = '<div class="item" style="width:96%; margin:5px auto; position:relative; height: auto; background-color:lightgray;"><form action="file-upload.php" class="dropzone" id="'+dropZoneId+'"></form></div>';
  document.getElementById("div2").appendChild(div.firstChild);           
  var myDropzone = new Dropzone("#"+dropZoneId,{
        paramName: 'file',
        method: 'post',
        maxFiles: 1,
        url: 'file-upload.php',
        dictDefaultMessage: "Drag your images for zone "+val,
        clickable: false,
        maxFilesize: 512,
        uploadMultiple: false,
        addRemoveLinks: true,
        forceFallback:false,
        init: function(){
           // from the doc, quick debug
           this.on("addedfile", function(file) { alert("added file in zone."+val); });
           this.on("maxfilesexceeded", function(file) { alert("File limit 1"); });
           this.on("complete", function(file) {alert(serverReponse);});
           }
        });      
}
$(document).ready(function(){
     addDropzone(1);
     addDropzone(2);
    }
   );