成功后从 dropzone 中删除预览答案

【问题标题】：Remove previews from dropzone after success成功后从 dropzone 中删除预览
【发布时间】：2015-11-21 11:04:54
【问题描述】：

我想在 dropzone 成功事件或 dropzone 完成事件之后回滚原始 dropzone 并显示“将文件放到此处”的消息。

我不想看到成功或完成后的预览。

这是我的拖放区脚本：

Dropzone.options.myAwesomeDropzone = {

  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  parallelUploads: 1,
  success: function(file, response) {
    var imageSrc = response;
    $(".img-responsive").attr('src', imageSrc);
    if (imageSrc == '/assets/images/offerfeatimg.jpg') {
      $(".removebutton").hide();
    } else {
      $(".removebutton").show();
    }
  }
};

【问题讨论】：

标签： dropzone.js

【解决方案1】：

利用@kkthxby3 的想法，可以使用以下代码在success方法中清除缩略图的innerHTML：

 success: function (file, response) {
      file.previewElement.innerHTML = "";
 }

这种方法的美妙之处在于它可以在不触发removedFile 事件的情况下清除缩略图。

这会在缩略图所在的 dom 中留下以下 html：

 <div class="dz-preview dz-processing dz-image-preview dz-complete"></div>

但是如你所见，上面负责显示缩略图的 div 现在是空的。

另一种方法是删除包含缩略图及其内容的封闭 div。这种方法可以通过success方法中的以下代码来完成，并且不会在dom中留下缩略图的痕迹：

 success: function (file, response) {
      file.previewElement.parentNode.removeChild(file.previewElement);
 }

享受吧。

【讨论】：

是的，这可以正常工作，也可以再次显示 dropzone 消息，例如（将文件拖放到此处或单击上传。） removeClass dz-started from dropzone class element。 $('.dropzone').removeClass('dz-started');

【解决方案2】：

只需要在成功函数中调用removeFile方法

success: function (file, response) {
   this.removeFile(file);
}

查看doc dropzone

【讨论】：

调用this.removeFile(file); 将删除预览，但它也会触发removedFile 事件，如果您提供了处理这些事件以删除上传文件的支持，这将导致对服务器的ajax 调用以删除文件。如果有一种方法可以在不触发 removedFile 事件的情况下删除缩略图，那就太好了。
@Daniel Arenas，非常感谢！它对我有用，你拯救了我的一天

【解决方案3】：

对我来说，不显示文件预览的最简单方法是使用 css。

dz-preview 和 dz-file-preview 是默认模板生成的预览 html 的外部 div 中的几个类。

.dz-preview, .dz-file-preview {
    display: none;
}

我还告诉它不要在 Dropzone.options 中创建缩略图。

Dropzone.options.myDropzone = {
    paramName: "file",
    maxFilesize: 2, // MB
    url: 'post_image',

    createImageThumbnails: false, // NO THUMBS!

    init: function () {
      this.on('sending', dz_sending),
      this.on('success', dz_success),
      this.on('error', dz_error),

      this.on('complete', dz_complete) // Once it's done...
    }

尽管如此，模板仍然会生成所有的预览 html。所以在我的“完整”函数dz_complete 中我将其全部删除。

function dz_complete(file) {
  $('.dz-preview').remove();  // ...delete the template gen'd html.
}

【讨论】：

【解决方案4】：

仅供参考……

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

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

因此，人们可以对此添加一些技巧，但实际上该方法是不正确的。

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

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

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

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

【讨论】：

【解决方案5】：

最简单的方法是调用 dropzone removeFile() 方法，使用成功事件的事件侦听器。

Dropzone.options.myAwesomeDropzone = {
    paramName: "file",
    maxFilesize: 2,
    parallelUploads: 1,
    init: function() {
        this.on("success", function(file, response) {
            var imageSrc = response;
            $(".img-responsive").attr('src', imageSrc);
            if(imageSrc == '/assets/images/offerfeatimg.jpg') {
                $(".removebutton").hide();
            } else {
                $(".removebutton").show();
            }
            this.removeFile(file); // This line removes the preview
        })
    }
};

【讨论】：

【解决方案6】：

我使用的是file.previewElement.remove()，在 Chrome 中运行良好，但在 IE 中无法运行。然后我尝试了this.removeFile(file)，但它对我不起作用。之后我尝试了file.previewElement.innerHTML = ""，它适用于 Chrome 和 IE，但它在预览元素所在的位置留下了一个额外的 div。所以这个更适合我...

success: function (file, response) {
    file.previewElement.outerHTML = "";
}

【讨论】：

【解决方案7】：

如果你想从 dropzone 中删除一个添加的文件，你可以调用 .removeFile(file)。这个方法也会触发removedfile事件。

这是一个在文件上传完成后自动删除文件的示例：

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

如果要删除所有文件，只需使用 .removeAllFiles()。正在上传的文件不会被删除。如果您希望取消当前正在上传的文件，请调用 .removeAllFiles(true) 来取消上传。

【讨论】：

【解决方案8】：

100% 测试和工作：

$('#preview_image_container .dz-preview .dz-remove').attr('id','removeFile');
document.getElementById("removeFile").click();

【讨论】：