Javascript 如何在dropzone插件中添加removefile选项？

how to add removefile option in dropzone plugin?

提问by markatte team

I have used dropzone.js (http://www.dropzonejs.com/). I am trying to add delete button to delete the image. but i am getting javascript undefined error

我使用过 dropzone.js ( http://www.dropzonejs.com/)。我正在尝试添加删除按钮来删除图像。但我收到 javascript 未定义错误

 <script>
  Dropzone.options.myDropzone = {
init: function() {
 addRemoveLinks: true,  
thisDropzone = this;
 $.get('photo-add.php', function(data) {
 $.each(data, function(key,value){
var mockFile = { name: value.name, size: value.size };
  thisDropzone.options.addedfile.call(thisDropzone, mockFile);
 thisDropzone.options.thumbnail.call(thisDropzone, mockFile,      "upload/"+value.name);

});
 });

 this.on("removedfile", function(file) {
alert(file.name);
console.log(file);
     // Create the remove button
  var removeButton = Dropzone.createElement("<button>Remove file</button>");

 /    / Capture the Dropzone instance as closure.
  var _this = this;

 // Listen to the click event
 removeButton.addEventListener();

   // Add the button to the file preview element.
  file.previewElement.appendChild(removeButton);
    });
  }
  };
     </script>

回答by Tintu C Raju

I think you are not configuring the dropzonein proper way.

我认为您没有dropzone以正确的方式配置。

init: function() {
 addRemoveLinks: true, 

The code above is not valid .

上面的代码无效。

Use like this

像这样使用

Dropzone.options.myAwesomeDropzone = {
  addRemoveLinks: true,
  init: function() {

  }

  ...

};

or else you can also use like this.addRemoveLinks = true

否则你也可以使用像 this.addRemoveLinks = true

If you want to handle the event of removing file you can use like this

如果你想处理删除文件的事件，你可以像这样使用

removedfile: function(file) {
    x = confirm('Do you want to delete?');
    if(!x)  return false;
}

Handle the deletion of file on server side.

处理服务器端的文件删除。

on success method of dropzone push the file name to an array eg : file_up_names=[];

在 dropzone 的成功方法上将文件名推送到数组，例如： file_up_names=[];

 success:function(file){
   file_up_names.push(file.name);

now on delete get the name and pass it to the php page for file deletion.

现在删除获取名称并将其传递给php页面以进行文件删除。

 removedfile: function(file) {

    x = confirm('Do you want to delete?');
    if(!x)  return false;
    for(var i=0;i<file_up_names.length;++i){

      if(file_up_names[i]==file.name) {

        $.post('delete_file.php', 
             {file_name:file_up_names[i]},
           function(data,status){
             alert('file deleted');
             });
       }
    }
 }

also note if you have changed the file name on server side you have to get back that file name to delete.

另请注意，如果您在服务器端更改了文件名，则必须取回该文件名才能删除。

回答by Dhaval Bharadva

Try below code:

试试下面的代码：

Dropzone.autoDiscover = false;
var acceptedFileTypes = "image/*"; //dropzone requires this param be a comma separated list
var fileList = new Array;
var i = 0;
$("#dropzone").dropzone({
    addRemoveLinks: true,
    maxFiles: 10, //change limit as per your requirements
    dictMaxFilesExceeded: "Maximum upload limit reached",
    acceptedFiles: acceptedFileTypes,
    dictInvalidFileType: "upload only JPG/PNG",
    init: function () {

        // Hack: Add the dropzone class to the element
        $(this.element).addClass("dropzone");

        this.on("success", function (file, serverFileName) {
            fileList[i] = {
                "serverFileName": serverFileName,
                "fileName": file.name,
                "fileId": i
            };
            $('.dz-message').show();
            i += 1;
        });
        this.on("removedfile", function (file) {
            var rmvFile = "";
            for (var f = 0; f < fileList.length; f++) {
                if (fileList[f].fileName == file.name) {
                    rmvFile = fileList[f].serverFileName;
                }
            }

            if (rmvFile) {
                $.ajax({
                    url: path, //your php file path to remove specified image
                    type: "POST",
                    data: {
                        filenamenew: rmvFile,
                        type: 'delete',
                    },
                });
            }
        });

    }
});

回答by Greg Sipes

I came across this same issue. I thought Dhaval's answer would help, but I found a cleaner way from the documentation.

我遇到了同样的问题。我认为 Dhaval 的回答会有所帮助，但我从文档中找到了一种更简洁的方法。

from the docs:

从文档：

If you want some specific link to remove a file (instead of the built in addRemoveLinks config), you can simply insert elements in the template with the data-dz-remove attribute. Example:

如果您想要一些特定的链接来删除文件（而不是内置的 addRemoveLinks 配置），您可以简单地使用 data-dz-remove 属性在模板中插入元素。例子：

<img src="removebutton.png" alt="Click me to remove the file."
> data-dz-remove />

I tested this same attribute on a button in my preview template and it worked as needed.

我在预览模板中的一个按钮上测试了这个相同的属性，它可以根据需要工作。

回答by Bashirpour

"Every your events" Like : success - error - sending - removedfile or addedfile and etc.

“每一个你的事件”比如：成功 - 错误 - 发送 - 删除文件或添加文件等。

http://www.dropzonejs.com/#event-list

http://www.dropzonejs.com/#event-list

init : function () {
    self.on('Every your events', function (file, response) {
        this.removeFile(file);
    }
}

for remove file from out of this function can do this :

从这个函数中删除文件可以这样做：

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

回答by gauravbhai daxini

Try below code:

试试下面的代码：

Dropzone.autoDiscover = false;

  var dropzone = new Dropzone ("#mydropzone", {
    maxFilesize: 256, // Set the maximum file size to 256 MB
    paramName: "document[attachment]", // Rails expects the file upload to be something like model[field_name]
    autoProcessQueue: false,
    addRemoveLinks: true // Don't show remove links on dropzone itself.
  });

  dropzone.on("removedfile", function(file){
    alert('remove triggered');
  });

  dropzone.on("addedfile", function(file){
    alert('add triggered');
  });

  dropzone.on("success", function(file){
    alert('success triggered');
  });

回答by libnac

Server Side

服务器端

uploadFile

上传文件

Save file and, if you decide to store file information on database, echo database table file ID or if you decide to store file on disk only, echo the new name for the file.

保存文件，如果您决定将文件信息存储在数据库中，则回显数据库表文件 ID，或者如果您决定仅将文件存储在磁盘上，则回显文件的新名称。

removeFile

删除文件

Remove file with id or name received from POST var $_POST["fid"] or with the name specified on it.

删除具有从 POST var $_POST["fid"] 收到的 id 或名称的文件或在其上指定的名称。

Javascript JQuery

Javascript JQuery

fileList = new Array();
$("#fm-dropzone").dropzone({
  url: siteurl, 
  addRemoveLinks: true, 
  dictRemoveFileConfirmation: "Are you sure you want to remove this File?",     
  success: function(file, serverFileName) {
             fileList[file.name] = {"fid" : serverFileName };
           },
  removedfile: function(file) {
            $.post(siteurl + "/removeFile", fid:fileList[file.name].fid}).done(function() {
                    file.previewElement.remove();
                }); 
           }
});