javascript 动态添加 dropzone.js div 元素到表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26323417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically add dropzone.js div element to the form
提问by Jaspal
I have to use multiple dropzone areas to upload images. I have used the jQuery append()function to dynamically create the div.
我必须使用多个 dropzone 区域来上传图像。我已经使用 jQueryappend()函数来动态创建 div。
The problem is that the dynamically created dropzone is not initialized and therefore not working.
问题是动态创建的 dropzone 未初始化，因此无法正常工作。
采纳答案by Jaspal
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 querySelectorreturns the reference of the elements which have custom attribute i have used data-tagline.
这是我用来做同样的脚本。我使用querySelector更改了动态创建的输入类型文本的名称字段。所述querySelector返回其具有自定义属性我已经使用的元素的参考数据标语。
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>回答by Amit Joki
Just make sure to call the plugin on that newly appended element. The problem is the plugin gets attached to only elements which were present initially.
只需确保在新添加的元素上调用插件即可。问题是插件只附加到最初存在的元素上。
So, call the plugin once again after you append the element so, it gets attached and works again.
因此，在附加元素后再次调用插件，它会被附加并再次工作。
回答by Félix Gagnon-Grenier
A bit late to the party but they thought about it. As stated in the usagepart of the documentation:
聚会有点晚了，但他们想了想。如文档的使用部分所述：
Alternatively you can create dropzones programmaticaly (even on non form elements) by instantiating the Dropzone class
或者，您可以通过实例化 Dropzone 类以编程方式（甚至在非表单元素上）创建 dropzone
// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
You may have to create an element and set some properties manually.
您可能必须创建一个元素并手动设置一些属性。
var form = document.createElement('form');
form.classList.add('dropzone');
form.method = 'post';
form.action = '/file/post';
document.getElementById('parent').appendChild(form);
new Dropzone(form);
Don't forget to specify an url option if you're not using a form element, since Dropzone doesn't know where to post to without an action attribute.
如果您不使用表单元素，请不要忘记指定一个 url 选项，因为 Dropzone 不知道在没有 action 属性的情况下发布到哪里。
回答by Shawn
dynamically create dz element:
动态创建 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> ';
append to div somewhere
附加到 div 某处
$("#uploads").prepend(d);
start instance
启动实例
myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", { url: "../cgi/newUploader.exe"});
add 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);
}
}
};
