使用淡入淡出重置拖放区

Question

我有一个DropZone表单，每次上传后都会重置。我的需求决定了一次上传一次一次，因为用户会做出指示特定属性的选择。

我的DropZone选项的相关部分：

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

这非常适合我的目的，但有一个小问题，因为成功上传后缩略图和复选标记消失得如此之快，以至于用户根本不知道它发生了。

我找到了一个暂停然后清除缩略图的功能。它不会重置DropZone，这会阻止其他上传。我将两者结合起来的努力失败了，所以我正在寻找一些关于如何将两者结合起来的帮助。我想要在删除缩略图和重置 DropZone 之前延迟一段时间。

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

Answer 1

好的

，所以不确定你是如何初始化你的 Dropzone，但我会按照我一直以来为我的项目做的方式去做：

.HTML

<div id="DzUploadFile" class="dropzone"></div>

.JS

Dropzone.autoDiscover = false;
myDropzone = new Dropzone("#DzUploadFile", {
                url: "@Html.Raw(Url.Action("TempName", "ManagerFiles", new {
                 area = "",
                 Folder = Route, TmpFolderName = "File_"}))",
                paramName: 'files',
                addRemoveLinks: true,
                acceptedFiles: "image/jpeg,image/png,image/bmp",
                maxFilesize: 10,
                maxFiles: 1,
                success: function (file, response) {
                    file.previewElement.classList.add("dz-success");
                    $(file.previewElement).find('[data-dz-name]').html(response.title);                        
                    setTimeout(function () {
                        myDropzone.removeFile(file);
                        console.log("File uploaded and removed from view");
                    }, 2500);
                }
            });

当然，您始终可以在实例上设置事件侦听器：

myDropzone.on("success", function (file, response) {
                file.previewElement.classList.add("dz-success");
                $(file.previewElement).find('[data-dz-name]').html(response.title);
                setTimeout(function () {
                        myDropzone.removeFile(file);
                        console.log("File uploaded and removed from view");
                    }, 2500);
            });

目前

我不能给你一个活的例子，但目前在我的项目中以这种方式工作。

注意：

• 我使用 .NET MVC，这就是为什么url是这样，只需将其替换为您自己的
• 我只是接受图像文件，您可以随时将其删除或设置自己的acceptedFiles
• 通知用户您删除了该文件，使用一些漂亮且流畅的警报/消息（如 SweetAlert）或您正在为项目实现的文件，应该是一个好主意。