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

Posted 2023-02-24

【中文标题】如何在 dropzone 插件中添加 removefile 选项？

【英文标题】：how to add removefile option in dropzone plugin?

【发布时间】：2016-02-17 04:06:57

【问题描述】：

我使用了 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>

【参考方案1】：

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

init: function() 
 addRemoveLinks: true, 

上面的代码无效。

这样使用

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

  

  ...

;

或者你也可以使用this.addRemoveLinks = true

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

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

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

关于 dropzone 的成功方法将文件名推送到数组 eg:file_up_names=[];

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

现在在删除时获取名称并将其传递给 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');
             );
       
    
 

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

【讨论】：

如何添加php url链接删除文件？

嗨 raju 我仍然得到 removelink undefined

这是一个完整的示例代码。请查看wikisend.com/download/322352/sampledropzone.rar

如何在 dropzone 中使用缩略图显示来自服务器的即时名称。你能指导我吗

@pinkpanther 嗨，我已经再次上传了。这是新链接wikisend.com/download/168728/sampledropzone.rar

【参考方案2】：

试试下面的代码：

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',
                    ,
                );
            
        );

    
);

【参考方案3】：

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

来自文档：

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

<img src="removebutton.png" 
> data-dz-remove />

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

【讨论】：

您能详细解释一下吗？如何在模板中插入？模板是 html 吗？

【参考方案4】：

服务器端

上传文件

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

删除文件

删除从 POST var $_POST["fid"] 或 上面有指定的名字。

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

【参考方案5】：

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

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 可以这样做：

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

【参考方案6】：

试试下面的代码：

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