dropzone.js 从服务器检索时抑制进度条

Question

使用 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"
};

Answer 1

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

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

不太优雅，但很管用。

Answer 2

确保没有进度条等...

thisDropzone.emit("complete", mockFile);

FAQ Dropzone.JS

Answer 3

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

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

Answer 4

我遇到了同样的问题。

$('.dz-progress').hide();

如果您使用 .hide() 而不是 .remove() 方法，那就太好了。因为 .remove() 删除了那个 div 永久的。

Answer 5

试试这个对我有用 $(".spinner").隐藏();

Answer 6

你可以尝试这个并工作

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
},

Answer 7

如果您有任何 class 和 "spinner"，这将隐藏所有这些元素。显示进度的 div 元素有一个 "dz-preview" class。正如其他回复中提到的，您可以增加现有的 class 以欺骗 Dropzone 认为上传已完成，或者您可以使用 class "dz-preview".

清除元素

dropzone.js 从服务器检索时抑制进度条

dropzone.js Suppress progress bar when retrieving from server

javascript

css

jquery

dropzone.js