单击按钮后如何在Dropzone.js中调用.removeAllFiles（）函数

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.

现在当用户点击

So, I tried using

所以,我试过用

 $("#close").click(function(){
      drop.removeAllFiles(true);
   });

But it's not working, In console.log I am getting the error removeAllFiles() is not declared for drop.

但是它没有用,在console.log中我收到错误removeAllFiles()没有声明为drop。

Where am I wrong?

我哪里错了?

5 个解决方案

#1

This worked for me.

这对我有用。

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

Reference: https://github.com/enyo/dropzone/issues/180

#2

Here is the code, it will solve your problem.

这是代码,它将解决您的问题。

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

        };
 });

#3

Your drop is 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.

有时需要使用带有dropzone的jQuery(selector [,context])。所以非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);
});

#4

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


        });

#5

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.

如果有人建议您进一步完善此代码,请与我们联系。

#1