[英]Dynamically add dropzone.js div element to the form
我必须使用多个 dropzone 区域来上传图像。 我使用 jQuery append()
function 来动态创建 div。
问题是动态创建的 dropzone 未初始化,因此无法正常工作。
只要确保在新添加的元素上调用插件即可 。 问题是该插件仅附加到最初存在的元素上。
因此,在添加元素之后再次调用该插件,这样它将被附加并可以再次使用。
这是我曾经使用过的脚本。 我通过使用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>
在您的脚本中,您需要一个 function 来为 dropzone 创建表单,然后执行 function Dropzone.discover()
function add_dropzone() {
const drop_zone = document.createElement("form");
drop_zone.setAttribute("class","dropzone");
drop_zone.setAttribute("action","url_to_upload_files/");
drop_zone.setAttribute("id","my_dropzone");
//find a div where you want to add your dropzone
document.getElementById("div_for_dropzone").appendChild(drop_zone);
// this function will find the class="dropzone" tag and load it.
Dropzone.discover();
}
然后在您的 html 中,您只需要添加一个id="div_for_dropzone"
的 div
动态创建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);
}
}
};
晚了一点,但是他们考虑了一下。 如文档的用法部分所述:
另外,您可以通过实例化Dropzone类以编程方式(甚至在非表单元素上)创建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属性的发布位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.