如何在单击按钮后调用Dropzone.js中的.removeAllFiles()函数
How to call the .removeAllFiles() function in Dropzone.js after a click on a button
我正在使用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
}
});
现在,当用户点击<button id="close"></button>
按钮时,我想使用drop.removeAllFiles(true)
功能清空整个列表,就像Dropzone.js官方网站上建议的那样。
所以,我试着使用
$("#close").click(function(){
drop.removeAllFiles(true);
});
但它不起作用,在console.log
中,我得到了错误removeAllFiles() is not declared for drop
。
我哪里错了?
这对我有效。
Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);
参考:https://github.com/enyo/dropzone/issues/180
这是代码,它将解决您的问题。
$(function() {
Dropzone.options.myAwesomeDropzone = {
init: function () {
var myDropZone = this;
$("#btnRemoveAll").click(function () {
myDropZone.removeAllFiles();
}
);
}
};
});
您的drop
引用的是jQuery对象,而不是Dropzone对象。
var drop = $("#upload").dropzone(options);
有时有必要将jQuery(selector[,context])与dropzone一起使用。因此,非jquery构造函数就不那么方便了。
var drop = new Dropzone(selector, options);
相反,您可以使用(丑陋的):获得Dropzone对象
var drop = $("#upload").dropzone(options).get(0).dropzone;
$("#close").click(function(){
drop.removeAllFiles(true);
});
这正在工作。。。请试试这个。
$("#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);
});
}
});
试试这个。这还包括对服务器的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);
});
如果人们有进一步完善此代码的建议,请告诉我。
在脚本的顶部定义一个变量
var drpzone;
将this
分配给init
中的drpzone
。
$("#upload").dropzone({
//your other options,
init: function () {
drpzone = this;
}
});
并在自定义事件中使用drpzone.removeAllFiles()
$("#close").click(function(){
drpzone.removeAllFiles();
});
最终代码:
var drpzone;
$("#upload").dropzone({
//your other options,
init: function () {
drpzone = this;
}
});
$("#close").click(function(){
drpzone.removeAllFiles();
});
最好在$(document).ready()
中进行此操作。
相关文章:
- 通过php页面中的js强制下载txt
- 调用php数组中的JS函数
- 如何引用HTML中节点模块中的js文件
- PHP中的JS.警报没有'不要出现
- 压缩静态HTML文件中的JS和CSS
- 将toString方法暴露给nashorn中的js对象
- 从.js文件调用html中的js函数
- cloudant中的JS trim()函数
- 动态(重新)创建iframe内容不会重置Chrome中的JS对象
- 使用HTML标记中的JS变量在Javascript中动态创建HTML
- 基于AJAX的网站中的JS window.location
- 可以't在Wordpress中从HTML中的JS文件调用函数
- 对php文件的Ajax调用返回该文件中的JS代码,而不是执行它
- 存储在 2D 数组中的 js 调用函数
- 点击蓝色按钮(点击vbs中的js按钮)
- View赢得't在页面更改时加载Rails 4应用程序中的JS
- 如何更新charts.JS值字段中的JS变量
- 从html文件中的js中提取链接
- Rails 4.1.1.:lib/assets/javascripts中的JS文件;t负载
- 将jsondecoded字符串中的js-eescaped-char(或hex-char?)转换为php中的html实体