如何删除现有的文件 dropzone？答案

【问题标题】：How to remove the existing file dropzone?如何删除现有的文件 dropzone？
【发布时间】：2016-03-08 08:25:31
【问题描述】：

我有这个样本：

编码 HTML：

<div class="dropzone dz-clickable" id="myDrop">
     <div class="dz-default dz-message" data-dz-message="">
          <span>Upload or drag patient photo here</span>
     </div>
</div>

代码 JS：

 Dropzone.autoDiscover = false;
 var myDropzone = new Dropzone("div#myDrop", {
   addRemoveLinks: true,
   url: "#",
   maxFiles: 1,
   init: function() {

     this.on("maxfilesexceeded", function(file) {
       alert("You are not allowed to chose more than 1 file!");
       this.removeFile(file);

     });

     this.on("addedfile", function(file) {
       myDropzone.options.removefile.call(myDropzone, mockFile);
       //  I want to delete an existing element
     });

   }
 });

 var fileName = $('#profilePicture').val();
 var mockFile = {
   name: fileName,
   size: 12345
 };
 myDropzone.options.addedfile.call(myDropzone, mockFile);
 myDropzone.options.thumbnail.call(myDropzone, mockFile, "https://lh3.googleusercontent.com/-eubcS91wUNg/AAAAAAAAAAI/AAAAAAAAAL0/iE1Hduvbbqc/photo.jpg?sz=104");

我想要做的是当用户上传一个文件时，然后删除现有的。

你怎样才能正确地做到这一点？

提前致谢！

【问题讨论】：

在上传另一个文件之前myDropzone.removeAllFiles()怎么样？
你能编辑我的例子吗？

标签： javascript jquery html dropzone.js

【解决方案1】：

试试这个方法。

removedfile: function(file) {
            file.previewElement.remove();
}

【讨论】：

【解决方案2】：

这是一种可行的方法：

var currentFile = null;
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", {
  addRemoveLinks: true,
  url: "#",
  maxFiles:1,
  init: function() {
    this.on("addedfile", function(file) {
      if (currentFile) {
        this.removeFile(currentFile);
      }
      currentFile = file;
    });
  }   
});

【讨论】：

是的，但我想替换第一张图片（默认加载）
@D.Cristi 然后在文件底部添加currentFile = mockFile;

【解决方案3】：

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

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("div#myDrop").removeAllFiles(true);

【讨论】：

【解决方案4】：

试试这个方法：

 success: function (file, response) {
                    if (this.files.length > 1)
                        this.removeFile(this.files[0]);
                    //Do others tasks...
                }

使用这种方法，前一个项目将被删除。

【讨论】：

【解决方案5】：

对我有用，如果图像已经上传到 dropzone 中，它不允许我添加更多。

this.on("addedfile", function(file) {
   /* Valid only in the dropzone . If a repetitive document shows ALERT and the previous item will disappear.(Sorry my English). */
   if (this.files.length) {
     var i, len, pre;
     for (i = 0, len = this.files.length; i < len - 1; i++) {
       if (this.files[i].name == file.name && this.files[i].size == file.size && this.files[i].lastModifiedDate.toString() == file.lastModifiedDate.toString()) {
         alert("Doc: " + file.name + " is already registered.")
         return (pre = file.previewElement) != null ? pre.parentNode.removeChild(file.previewElement) : void 0;
       }
     }
   }
 });

【讨论】：

【解决方案6】：

您好，您可以将 addRemoveLinks: true, 添加到 dropzone 函数中，然后在dropzon ajax之后添加成功函数

            success:function(file,response){
              file.serverId = response.id;
    $(".dz-preview:last .dz-remove").attr('onclick','delete_file('+file.serverId+')');
            }

在成功上传文件后的这段代码中，在 onclick 的 dropzone 中添加最后一个标签以调用 delete_file 函数，在此函数上，您可以接收 id 并将 id 发送到后端，查找文件在后台删除文件

【讨论】：