jquery 如何在单击按钮后调用Dropzone.js中的.removeAllFiles()函数

mm5n2pyu  于 2023-08-04  发布在  jQuery
关注(0)|答案(6)|浏览(134)

我正在使用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 .
我哪里错了?

muk1a3rh

muk1a3rh1#

这对我很有效。

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);

字符串
参考:https://github.com/enyo/dropzone/issues/180

5cnsuln7

5cnsuln72#

这是代码,它会解决你的问题。

$(function() {
            Dropzone.options.myAwesomeDropzone = { 
            init: function () {
                var myDropZone = this;
                $("#btnRemoveAll").click(function () {
                            myDropZone.removeAllFiles();
                        }
                );
            }

        };
 });

字符串

rjjhvcjd

rjjhvcjd3#

您的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);
});

jchrr9hc

jchrr9hc4#

这是工作...请尝试这个。

$("#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);
});
    }

        });

字符串

vsaztqbk

vsaztqbk5#

试试这个。这还包括对服务器的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);
});

字符串
请让我知道,如果人们有建议,以进一步完善这段代码。

slsn1g29

slsn1g296#

在脚本的顶部定义一个变量

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()内部执行此操作。

相关问题