拖放区.js禁止从服务器检索时的进度条

dropzone.js Suppress progress bar when retrieving from server

本文关键字：检索 js 禁止 服务器 拖放区      更新时间：2023-09-26

使用dropzone.js，我让它工作没有任何问题，包括检索之前已经上传到服务器的图像。

我遇到的唯一问题是，当我在页面刷新时从服务器检索这些文件时（这意味着它们在此页面的当前使用过程中未上传），上传进度条将永久显示。 有没有办法禁止显示以前上传的图像的进度条？我想在上传时继续使用进度条，并且不想从模板中删除 css。

并不是说它在这种情况下很有帮助，但这是我用来检索文件并在远程预览div 中显示它们的代码。

Dropzone.options.myDropzone = {
    previewsContainer: document.getElementById("previews"),
    init: function() 
    {
    thisDropzone = this;
    $.get('../cgi/fileUpload.php', function(data) 
    {
        $.each(data, function(key,value)
        {
            var mockFile = { name: value.name, size: value.size};
            thisDropzone.options.addedfile.call(thisDropzone, mockFile);
            thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.uploaddir+value.name);
            var strippedName = (value.name).slice(11);
            fileList[i] = {"serverFileName" : value.name, "fileName" : value.name, "fileSize" : value.size, "fileId" : i };
            i++;

            var removeButton = Dropzone.createElement("<button class='"btn btnremove'" style='"width: 100%;'">Remove file</button>");
            var _this = this;
            removeButton.addEventListener("click", function(e) 
            {
                e.preventDefault();
                e.stopPropagation();
                thisDropzone.removeFile(mockFile);
            });
            mockFile.previewElement.appendChild(removeButton);
        });
    });
},
url: "../cgi/fileUpload.php"
};

确保没有进度条等...

thisDropzone.emit("complete", mockFile);

常见问题 降落区.JS

这是一个老问题，但我有同样的问题。我的解决方案是编辑我的.css文件：

.dz-progress {
  /* progress bar covers file name */
  display: none !important;
}

我有同样的问题。

$（'.

dz-progress'）.hide（）;

如果你使用 .hide（） 而不是 .remove（） 方法，那就太好了。因为 .remove（） 永久删除该div。

回答！ 选择在交付后仅使用 jquery 删除div：

$(".dz-progress").remove();

不过分优雅，但它有效。

试试这对我有用$（".spinner"）.hide（）;

你可以试试这个并工作

init: function() {
            this.on("maxfilesexceeded", function(file) {
                this.removeAllFiles();
                this.addFile(file);
            });
            this.on("addedfile", function(file) {
                console.log("Added file.");
                $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
                console.log(this);
                console.log(file);
            });
            var mockFile = { name: "myimage.jpg", size: 1235, type: "image/jpeg", serverId: 151987, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
            this.emit("addedfile", mockFile);
            this.options.thumbnail.call(this, mockFile, 'https://lh3.googleusercontent.com/40gtienq1vthvuWpzCErQJqucB6oxANPHawkEiF6BEJH0Q7mJwHuOyUeRwMBIGb8vO8=s128');
            this.emit("success", mockFile);
            this.emit("complete", mockFile);
            this.files.push(mockFile);
            $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
            
            
            $(this.previewsContainer).find('.dz-progress').hide(); //<-- okkk
},

如果您有任何带有"spinner"的类，这将隐藏所有这些元素。有一个用于显示进度的div 元素的"dz-preview"类。如其他响应中所述，您可以扩充现有类以欺骗 Dropzone 认为上传已完成，或者您可以使用类"dz-preview"清除元素。

相关文章：