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，或者您正在为项目实施的警报/消息。

使用淡入淡出重置DropZone

1 个答案: