上传图片后清除dropzone.js缩略图

Question

我一直在使用dropzone.js来上传图片，按照这个教程使用mvc，但是在上传完图片后缩略图仍然显示，而我需要在每次上传图片后将其删除。

我尝试使用jQuery替换上传图片后生成的HTML，但它不像第一次那样正确地显示，需要刷新页面才能正确显示，但我不想这样做。

 $("#ImageUpload").replaceWith('<form action="/Products/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone dz-clickable" id="dropzoneForm">'
 +'<div class="fallback">'
 +'<input name="file" type="file" multiple />'
 +'<input type="submit" value="Upload" />'
 +'</div>');

- Fadi

Answer 1

你可以尝试这个：

myDropzone.on("complete", function(file) {
  myDropzone.removeFile(file);
});

更多信息在这里：http://www.dropzonejs.com/#dropzone-methods

- Giraldi

---

removeFile()/removeAllFiles()会从服务器端删除已上传的文件，这不是主题发起人所要求的。 - Mike

@MikeB.：你确定吗？文档中说：“如果您想从dropzone中删除已添加的文件，可以调用.removeFile（file）。”据我所知，它只会影响dropzone。该方法会触发“removedfile”事件，您可以听取该事件，并在需要时从服务器上删除文件。从服务器上删除文件似乎是可选的。如果我错了，请纠正我... - Giraldi

我不确定是否百分之百正确，但我曾经遇到过这种现象，当removeFile()从服务器中删除文件时，它也会默认地将其删除（我并没有特别关注removefile事件），然后我看到了这个：https://dev59.com/H2Af5IYBdhLWcg3wUBRc#43683894。因此，也许这一点值得额外关注。 - Mike

如果您启用了“addRemoveLinks”并使用dropzone-removed-file回调通过API调用从服务器中删除已上传的文件，则调用removeFile()/removeAllFiles()将进行API调用，并将同时从服务器中删除文件。在这种情况下（当您不希望发生删除API调用时），请使用https://dev59.com/H2Af5IYBdhLWcg3wUBRc#43683894。 - Umesh

如果用户选择多个文件，它不会工作，对吗？ - rony36

Answer 2

removeAllFiles()和removeFile()如果你也将Dropzone挂钩到删除文件，它们还会触发服务器端的文件删除。

只清除客户端的解决方案是：删除文件预览，并且如果您有一个空白状态消息，请删除dz-started类以防止Dropzone CSS将其隐藏：

$('.dropzone')[0].dropzone.files.forEach(function(file) { 
  file.previewElement.remove(); 
});

$('.dropzone').removeClass('dz-started');

- Flavio Copes

---

你能告诉我在哪里添加这个吗？我是 Flask 的新手。 - Malgo

Answer 3

另一种选择（类似于Giraldi的答案，但是当所有文件都完成时）：

myDropzone.on("queuecomplete", function () {
    this.removeAllFiles();
});

- Allie

---

它也会从服务器端删除已上传的文件，而TS所问的是如何清除拖放区域文件字段(缩略图)，而不是如何删除已上传的文件。 - Mike

Answer 4

这实际上是一件很容易的事情，但有时会变得困难，所以我只需使用jQuery删除dropzone生成的代码，并添加一个带有'id = btnCreate'的按钮。

 $('#btnCreate').click(function () {
        $('div.dz-success').remove();
   });

当我上传缩略图并点击按钮后，缩略图会被移除。

- Fadi

---

抱歉，但这是一个糟糕的解决方案。其他两个答案使用提供的 removeFile() 和 removeAllFiles() 方法是正确的，而且后续会减少更少的麻烦。在这样做时，内部文件计数器将不会重置。 - twistedpixel

Answer 5

提醒一下...

removeAllFiles 方法不一定是最佳选择。它与 removeFile(file) 相同。

我为 dropZone 的 removedfile 事件设置了一个事件处理程序... 我正在使用它来发送服务器消息，以从服务器中删除相应的文件（如果用户在上传缩略图后删除它）。使用方法 removeAllFiles（以及个性化的 removeFile(file)) 将触发事件 removedfile，这将删除上传的图像以及清除缩略图。

因此，可以在此基础上进行一些微调，但实际情况是，在本主题的主要答案中提到的方法是不正确的。

查看 Dropzone 的 API，我没有看到一个简单重置或清除缩略图的 API 调用... 方法 disable() 将清除存储的文件名等内容，但不会清除缩略图... 坦率地说，DropzoneJS 实际上缺少一个关键的 API 调用。

我的解决办法是手动重置包含 dropzone 的 div：

document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""

清除缩略图时不触发removedfile事件，该事件应用于从服务器删除图像...

- kkthxby3

Answer 6

docsDropzone.on('complete', function (response)
{
   $(".dz-preview").remove();
});

对我来说有效

- Irfan Ashraf

Answer 7

如果你在dropzone选项中监听完整事件，那么这很简单：

const dropZoneOptions = {
        url: ...,
        // complete event
        complete: function(file) {
          setTimeout(() => {
            this.removeFile(file); // right here after 3 seconds you can clear
          }, 3000);
        },
      }

- Serdar D.

Answer 8

尝试在您的库dropzone dropzone.js上执行此操作；但将超时设置为自动关闭2500。

success: function(file) {
  if (file.previewElement) {
    return file.previewElement.classList.add("dz-success"),
    $(function(){
      setTimeout(function(){
        $('.dz-success').fadeOut('slow');
      },2500);
    });
  }
},

- heriipurnama

Answer 9

清除这些缩略图的另一种方法

Dropzone.prototype.removeThumbnail = function () {
    $(".dz-preview").fadeOut('slow');
    $(".dz-preview:hidden").remove();
};

然后你可以这样调用它：

{your_dropzone}.removeThumbnail();

- jfernandez_04