动态将dropzone.js div元素添加到表单中 [英] Dynamically add dropzone.js div element to the form

问题描述

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

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

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

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

推荐答案

以下是我用来执行相同操作的脚本. 我已经通过使用 querySelector 更改了动态创建的输入类型文本的名称字段. querySelector 返回具有我使用过的数据标语的自定义属性的元素的引用.

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.

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>

这篇关于动态将dropzone.js div元素添加到表单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！