Ajouter dynamiquement dropzone.js div element au formulaire

Assurez-vous d'appeler le plugin sur cet élément nouvellement ajouté . Le problème est que le plugin n'appartient qu'à des éléments présentés initialement.

Donc, appelez le plugin une fois de plus après avoir ajouté l'élément, il s'attache et fonctionne à nouveau.

Voici le script que j'ai utilisé pour faire la même chose. J'ai changé le champ de nom de texte du type de saisie créé de manière dynamique en utilisant le sélecteur de requête . Le querySelector renvoie la référence des éléments qui ont un attribut personnalisé que j'ai utilisé data-tagline .

 Dropzone.options.myDropzone = { init: function() { this.on("addedfile", function(file) { _ref = file.previewTemplate.querySelector('[data-tagline]'); _ref.name = "This is my New name attribute of element"; }) }, previewTemplate:"<div class=\"dz-preview dz-file-preview\">\n "+ "<div class=\"dz-details\">\n "+ "<div class=\"dz-filename\"><span data-dz-name></span></div>\n "+ "<div class=\"dz-size\" data-dz-size></div>\n "+ "<img data-dz-thumbnail class=\"img-responsive img-thumbnail\" />\n "+ "<input type=\"text\" data-tagline />"+ "</div>\n "+ "<div class=\"dz-progress\">"+ "<span class=\"dz-upload\" data-dz-uploadprogress></span>"+ "</div>\n "+ "<div class=\"dz-success-mark\"><span>✔</span>"+ "</div>\n "+ "<div class=\"dz-error-mark\"><span>✘</span>"+ "</div>\n "+ "<div class=\"dz-error-message\"><span data-dz-errormessage></span>"+ "</div>\n"+ "</div>", }; 

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

Crée dynamiquement l'élément dz:

 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> '; 

Ajouter à div quelque part

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

Instance de démarrage

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

Ajouter des 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); } } }; 

Un peu en retard à la fête, mais ils y pensaient. Comme indiqué dans la partie d' utilisation de la documentation:

Alternativement, vous pouvez créer des dropzones programmaticaly (même sur des éléments non form) en créant une instance de la classe Dropzone

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

Vous devrez peut-être créer un élément et définir certaines propriétés manuellement.

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

N'oubliez pas de spécifier une option url si vous n'utilisez pas un élément de formulaire, car Dropzone ne sait pas où postuler sans un attribut d'action.