动态地将dropzone.js div元素添加到表单中

我必须使用多个dropzone区域来上传图像。 我已经使用jQuery append()函数动态创建div。

问题是动态创建的dropzone未初始化，因此无法正常工作。

Answer 1

只需确保在新添加的元素上调用插件即可 。 问题是插件只附加到最初存在的元素。

因此，在追加元素之后再次调用插件，它会被附加并再次工作。

Answer 2

这是我用来做同样的脚本。 我使用querySelector更改了动态创建的输入类型文本的名称字段。 querySelector返回具有我使用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:"
\n "+ "
\n "+ "
\n "+ "
\n "+ "\n "+ ""+ "
\n "+ "
"+ ""+ "
\n "+ "
✔"+ "
\n "+ "
✘"+ "
\n "+ "
"+ "
\n"+ "
", }; 

Answer 3

动态创建dz元素：

 var d='
'; d+=' 
 

在某处附加到div

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

开始实例

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

添加选项

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

Answer 4

派对有点晚了，但他们想到了。 如文档的使用部分所述：

或者，您可以通过实例化Dropzone类来创建programmaticaly的dropzones（甚至在非表单元素上）

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

您可能必须手动创建元素并设置一些属性。

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

如果您没有使用表单元素，请不要忘记指定url选项，因为Dropzone不知道在没有action属性的情况下将其发布到何处。