jQuery 单击按钮后如何在 Dropzone.js 中调用 .removeAllFiles() 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18460695/
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
How to call the .removeAllFiles() function in Dropzone.js after a click on a button
提问by rishy
I am using the http://www.dropzonejs.com/(dropzone.js) library. I have initialized one of my form element as,
我正在使用http://www.dropzonejs.com/(dropzone.js) 库。我已将我的表单元素之一初始化为，
var drop = $("#upload").dropzone({
uploadMultiple: "true",
addRemoveLinks: "true",
thumbnailWidth: "250",
thumbnailHeight: "250",
maxFilesize: "10",
headers: {
"title": titles,
"location": locations,
"tag": tags
}
});
Now when user clicks on a <button id="close"></button>button, I want to empty the whole list using the drop.removeAllFiles(true)function, as suggested on Dropzone.js official website.
现在，当用户单击<button id="close"></button>按钮时，我想按照drop.removeAllFiles(true)Dropzone.js 官方网站上的建议使用该函数清空整个列表。
So, I tried using
所以，我尝试使用
$("#close").click(function(){
drop.removeAllFiles(true);
});
But it's not working, In console.logI am getting the error removeAllFiles() is not declared for drop.
但它不起作用，在console.log我收到错误removeAllFiles() is not declared for drop。
Where am I wrong?
我哪里错了？
回答by Ducain
This worked for me.
这对我有用。
Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);
Reference: https://github.com/enyo/dropzone/issues/180
回答by Dilip Kumar
Here is the code, it will solve your problem.
这是代码，它将解决您的问题。
$(function() {
Dropzone.options.myAwesomeDropzone = {
init: function () {
var myDropZone = this;
$("#btnRemoveAll").click(function () {
myDropZone.removeAllFiles();
}
);
}
};
});
回答by Jasen
Your dropis referencing the jQuery object instead of the Dropzone object.
您drop正在引用 jQuery 对象而不是 Dropzone 对象。
var drop = $("#upload").dropzone(options);
Sometimes it is necessary to use jQuery(selector [,context])with dropzone. So the non-jquery constructor is not as convenient.
有时需要将jQuery(selector [,context])与 dropzone 一起使用。所以非jquery的构造函数就不那么方便了。
var drop = new Dropzone(selector, options);
Instead, you can get the Dropzone object with (the ugly):
相反，您可以使用（丑陋的）获取 Dropzone 对象：
var drop = $("#upload").dropzone(options).get(0).dropzone;
$("#close").click(function(){
drop.removeAllFiles(true);
});
回答by Shareef
This is working...Please try this.
这是有效的...请试试这个。
$("#close").click(function(){
drop.removeAllFiles(true);
});
$("#upload").dropzone({
uploadMultiple: "true",
addRemoveLinks: "true",
thumbnailWidth: "250",
thumbnailHeight: "250",
maxFilesize: "10",
headers: {
"title": titles,
"location": locations,
"tag": tags
},
init: function () {
var dropzone = this;
$("#close").click(function(){
dropzone.removeAllFiles(true);
});
}
});
回答by spitz
Try this. This also includes JSON calls to the server for deleting the files.
尝试这个。这还包括对服务器的 JSON 调用以删除文件。
mydropzone = new Dropzone("#mydropzone",{
url: "/dropzone",
addRemoveLinks : true,
maxFilesize: 2.0,
dictResponseError: 'Error uploading file!',
removedfile: function(file) {
var name = {file: file.name}
$.ajax({
type: 'POST',
url: '/dropzone_delete',
contentType: 'application/json',
data: JSON.stringify(name),
dataType: 'json',
success: function (e) {console.log(e);}
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
});
// Clear all files
$("#btn_clear_dropzone").click(function () {
// Delete existing files
mydropzone.removeAllFiles();
// Cancel current uploads
mydropzone.removeAllFiles(true);
});
Please let me know if people have suggestions to further refine this code.
如果人们有进一步完善此代码的建议，请告诉我。
