Question

我在mvc中使用了dropzone.js，按照此tutorial上传图片但在上传图片后仍然显示缩略图，我需要在每次上传图片后将其删除。

我试图在使用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>');

Answer 1

你可以试试这个：

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

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

Answer 2

removeAllFiles()和removeFile()也会触发服务器端删除，如果您挂钩Dropzone也可以删除文件。

解决方法只在客户端清除它，删除文件预览，如果有空白状态消息，请删除dz-started类以防止Dropzone CSS隐藏它：

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

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

Answer 3

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

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

Answer 4

这实际上是一件容易的事情，但有时候它很难，所以我只是使用jquery删除了dropzone生成的代码并添加一个带'id = btnCreate'的按钮然后

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

当我点击按钮

后上传缩略图图片时

Answer 5

只是一个假...

方法removeAllFiles不一定是首选。这与removeFile(file)相同。

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

因此，人们可以在此围绕这一点添加一些内容，但在现实中，此主题的主要答案中提到的方法是不正确的。

通过api查看Dropzone我没有看到简单地重置或清除缩略图的API调用...方法disable()将清除存储的文件名以及不清除缩略图的内容。似乎dropzoneJS实际上缺少一个关键的API调用，说实话。

我的工作是手动重置dropzone的包含div：

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

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

Answer 6

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

以上为我工作

Answer 7

在你的库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);
    });
  }
},

Answer 8

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

UITests

然后你这样称呼它：

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

Answer 9

如果您在dropzone选项中收听complete事件，这很简单：

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

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

9 个答案: