如何清除 dropzone.js dropzone

Question

我开始使用 dropzone.js 并且运行遇到了一个小问题。我能够上传文件。我使用模态弹出窗口来获取文件信息。

问题是当我返回时，我之前上传的文件仍然在拖放区（带有复选标记）。我想要一个空的拖放区。

想法？

Answer 1

您是否尝试在上传后调用拖放区对象的 "removeAllFiles" 函数？

查看文档：http://www.dropzonejs.com/#dropzone-methods

在这个post的第一个答案中，解决方案也是调用"removeAllFiles"函数： removing all manually added files from Dropzone.js?

如果不能解决您的问题，请提供更多信息

Answer 2

您可以在 upload.So 之前调用 removeAllFiles 函数来清除 dropzone 对象，当您尝试使用 dropzone 上传内容时，它将始终清晰。

myDropzone.removeAllFiles();

Answer 3

用 jquery 你可以做出这样的东西。

var dZUpload = $('#dZUpload).dropzone({
  ..
})

$('.click').click(function() {
  dZUpload[0].dropzone.removeAllFiles();  
})

Answer 4

我看到的所有答案都涉及在初始化 dropzone 时分配变量。如果你不想做这个额外的步骤并且已经有了你的 dropzone 元素：你可以使用 Dropzone 的 forElement 方法直接定位你的 dropzone 而不需要任何变量：

Dropzone.forElement('#myDropzoneElementID').removeAllFiles(true)

Answer 5

这可能会帮助那些因为下一个场景而无法解决问题的人。

当我调用 removeFile 时，我捕获了 removedfile 事件以将删除请求发送到后台。因此，当我使用 removeAllFiles 时，不仅删除了预览，还删除了服务器上的文件本身。

所以我想到了这个解决方案：

//I had the request depending on a flag
this.on("removedfile", function (file, hardRemove = 1) {
    if(hardRemove){
      // request the server to delete the file
    }
});

// I created a new event for visual reset that calls the removedfile event with the 
// hardRemove flag disabled, resets the array of files and emits the reset event 
// to reset the dropzone initial layout
this.on("resetFiles", function () {
    for (let file of this.files) {
      this.emit("removedfile", file, 0);
    }
    this.files = [];
    return this.emit("reset");
  });

所以每当我想重置 dropzone 时，我只需调用新事件：

dropzone.emit("resetFiles");

如何清除 dropzone.js dropzone

How to clear dropzone.js dropzone

dropzone.js