Dynamically add dropzone.js div element to the form

问题:

I have to use multiple dropzone areas to upload images. I have used the jQuery append() function to dynamically create the div.

The problem is that the dynamically created dropzone is not initialized and therefore not working.

回答1:

Just make sure to call the plugin on that newly appended element. The problem is the plugin gets attached to only elements which were present initially.

So, call the plugin once again after you append the element so, it gets attached and works again.

回答2:

Here is the script i have used to do the same. I have changed the dynamically created input type text's name field by using the querySelector. The querySelector returns the reference of the elements which have custom attribute i have used data-tagline.

<div id="my-dropzone" class="dropzone" action="upload.php"></div>

回答3:

dynamically create dz element:

var d='<div id="dzFormDiv">'; d+='  <form '; d+='      class="dropzone"'; d+='      id="my-awesome-dropzone">'; d+='      <input type="hidden" id="dztoken" name="dztoken">  '; d+='      <input type="hidden" id="dzt2" name="dzt2"> '; d+='  </form>   '; d+='  <div id="dsbw">'; d+='    <button id="btnRemoveAlldz">clear</button>'; d+='  </div>    '; d+='</div> ';

append to div somewhere

$("#uploads").prepend(d);   

start instance

myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", { url: "../cgi/newUploader.exe"}); 

add options

   Dropzone.options.myAwesomeDropzone = {    init: function () {         var myDropZone = this;         $("#btnRemoveAlldz").click(function () {                                                         myDropZone.removeAllFiles();                 }         );                                 myDropZone.on("complete", function (file) {           if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {              consol.log("completed upload");           }         });                     myDropZone.on("sending", function (file) {                                                         // do something before uploading         });      },        error: function(){          // call error handling function        },        success: function(file,r){           // called after EACH successfull upload             file.previewElement.classList.add("dz-success");                     if(r.indexOf("ok")>-1){                                  console.log("success");               }else{                 console.log(r);               }                }          };  

回答4:

A bit late to the party but they thought about it. As stated in the usage part of the documentation:

Alternatively you can create dropzones programmaticaly (even on non form elements) by instantiating the Dropzone class

// Dropzone class: var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

You may have to create an element and set some properties manually.

var form = document.createElement('form'); form.classList.add('dropzone'); form.method = 'post'; form.action = '/file/post'; document.getElementById('parent').appendChild(form); new Dropzone(form);

Don’t forget to specify an url option if you’re not using a form element, since Dropzone doesn’t know where to post to without an action attribute.

转载请标明出处:Dynamically add dropzone.js div element to the form

文章来源: Dynamically add dropzone.js div element to the form