[英]Not able to add event handler in dropzone
I am making this addDropzone() function called on a button click which passes a value as mutilple dropzone elements are needed, but only one at time but on different div's so 'val' parameter in function helps define div id's. 我正在按钮点击调用addDropzone()函数,它传递一个值,因为需要mutilple dropzone元素,但是只有一个在时间但在不同的div上,所以函数中的'val'参数有助于定义div id。 I am able to run the dropzone element. 我能够运行dropzone元素。 It also saves the files on the server, but i am not able to get event handler's working. 它还将文件保存在服务器上,但我无法使事件处理程序正常工作。
This is the function that I am using. 这是我正在使用的功能。
Also if anybody could suggest me a way to read server message in event handler 此外,如果有人可以建议我在事件处理程序中读取服务器消息的方法
function addDropzone(val){
document.getElementById("div2").innerHTML = '<div class="item" style="width:96%; margin:5px auto; position:relative; height: auto; background-color:lightgray;"><form action="file-upload.php" class="dropzone" id="my-dropzone-'+val+'"></form></div>';
var myDropzone = new Dropzone("div #my-dropzone-"+val);
Dropzone.options.myDropzone = {
paramName: 'file',
method: 'post',
maxFiles: 1,
url: 'file-upload.php',
dictDefaultMessage: "Drag your images",
clickable: false,
maxFilesize: 512,
uploadMultiple: false,
addRemoveLinks: true,
forceFallback:true
};
Dropzone.options.myDropzone = false;
Dropzone.options.myDropzone.enable();
Dropzone.options.myDropzone = {
init: function(){
this.on("maxfilesexceeded", function(file) { alert("File limit 1"); });
this.on("complete", function(file) {alert(serverReponse);});
}
};
}
Didn't know about dropzone, but as I understand the documentation, I would have written it like this : 不知道dropzone,但据我理解文档,我会这样写:
function addDropzone(val){
var dropZoneId= "my-dropzone-"+val;
// this line has moved-up, and the option is not referenced in the same way
Dropzone.options[dropZoneId] = false;
// proper way of adding new content to div2 without losing event handlers
var div = document.createElement('div');
div.innerHTML = '<div class="item" style="width:96%; margin:5px auto; position:relative; height: auto; background-color:lightgray;"><form action="file-upload.php" class="dropzone" id="'+dropZoneId+'"></form></div>';
document.getElementById("div2").appendChild(div.firstChild);
var myDropzone = new Dropzone("#"+dropZoneId,{
paramName: 'file',
method: 'post',
maxFiles: 1,
url: 'file-upload.php',
dictDefaultMessage: "Drag your images for zone "+val,
clickable: false,
maxFilesize: 512,
uploadMultiple: false,
addRemoveLinks: true,
forceFallback:false,
init: function(){
// from the doc, quick debug
this.on("addedfile", function(file) { alert("added file in zone."+val); });
this.on("maxfilesexceeded", function(file) { alert("File limit 1"); });
this.on("complete", function(file) {alert(serverReponse);});
}
});
}
$(document).ready(function(){
addDropzone(1);
addDropzone(2);
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.