Question

我必须使用多个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:"<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>

Answer 3

动态创建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> ';

将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

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

或者你可以通过实例化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属性的情况下不知道要发布到哪里。

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

4 个答案: