Question

我想在dropzone成功事件之后或dropzone的完整事件之后回滚原始dropzone及其“drop files here”消息。

我不希望在成功或完成后看到预览。

这是我的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();
    }
  }
};

Answer 1

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

{{1}}

检查doc dropzone

Answer 2

利用@ 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。这种方法可以通过成功方法中的以下代码完成，并且不会在dom中留下缩略图的痕迹：

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

享受。

Answer 3

只是一个假...

方法'removeAllFiles'不一定是首选。这与'removeFile（file）'相同。

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

因此，人们可以在此周围添加一些内容，但在现实中，这种方法并不正确。

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

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

document.getElementById（“divNameWhereDropzoneClassIs”）。innerHTML =“”

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

Answer 4

最简单的方法是调用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
        })
    }
};

Answer 5

对我而言，显示文件预览而非的最简单方法是使用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。所以在我的完整＆＃39; function dz_complete我删除了所有内容。

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

Answer 6

我使用的是file.previewElement.remove()，在Chrome中可以正常使用，但在IE中则无法使用。然后，我尝试了this.removeFile(file)，但是对我来说不起作用。之后，我尝试了file.previewElement.innerHTML = ""，它在Chrome和IE中都可以使用，但是在预览元素所在的位置留了一个额外的div。所以这个对我来说更好...

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

Answer 7

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

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

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

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

Answer 8

100％经过测试并可以正常工作：

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

成功后从dropzone中删除预览

8 个答案: