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

Question

我在mvc中使用了dropzone.js,按照本教程上传图像,但在上传图像后,缩略图仍然显示,我需要在每次上传图像后将其删除.

我已经尝试使用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()将触发服务器端的去除也一样,如果你上钩悬浮窗删除的文件.

解决方案只在客户端清除它,删除文件预览,如果有空白状态消息,请删除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();
   });

当我上传缩略图时，单击按钮后删除