javascript dropzone.js 从服务器检索时抑制进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28928137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dropzone.js Suppress progress bar when retrieving from server
提问by tllewellyn
Using dropzone.js, I've had no issues getting it to work, including retrieving images already previously uploaded to the server.
使用 dropzone.js，我在让它工作时没有遇到任何问题，包括检索先前上传到服务器的图像。
The only problem I have is when I retrieve those files from the server on a page refresh (meaning they weren't uploaded during this page's current usage), the upload progress bar is permanently displayed. Is there any way to suppress the progress bar for images previously uploaded? I would like to continue to use the progress bars when uploading and don't want to remove the css from the template.
我遇到的唯一问题是，当我在页面刷新时从服务器检索这些文件时（意味着在此页面的当前使用期间它们没有上传），上传进度条会永久显示。有没有办法抑制以前上传的图像的进度条？我想在上传时继续使用进度条，并且不想从模板中删除css。
Not that it's helpful in this case, but here is the code I'm using to retrieve the files and display them in a remote previews div.
并不是在这种情况下它有帮助，但这是我用来检索文件并将它们显示在远程预览 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"
};
采纳答案by tllewellyn
Answered! Chose to just remove the divs using jquery after they were delivered:
回答了！选择在交付后使用 jquery 删除 div：
$(".dz-progress").remove();
Not overly elegant, but it works.
不是过于优雅，但它的工作原理。
回答by eclaude
回答by Stephen Bade
This is an old question but I had the same issue. My solution was to edit my .css file:
这是一个老问题，但我有同样的问题。我的解决方案是编辑我的 .css 文件：
.dz-progress {
/* progress bar covers file name */
display: none !important;
}
回答by Girish Rathod
I had same problem.
我有同样的问题。
$('.dz-progress').hide();
$('.dz-progress').hide();
It would be great if you use .hide() instead of .remove() method. Because .remove() remove that div permanent.
如果您使用 .hide() 而不是 .remove() 方法会很棒。因为 .remove() 永久删除该 div。
回答by Suneth Senanayake
Try this worked for me $(".spinner").hide();
试试这对我有用 $(".spinner").hide();
回答by Vuong Passion
you can try this and work
你可以试试这个并工作
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
},回答by mikepawlak408
If you have any class with "spinner", this will hide all of those elements. There is a "dz-preview" class for the div element that displays the progress. As mentioned in other responses, you can either augment the existing class to trick Dropzone into thinking the upload completed or you can purge the element with class "dz-preview".
如果您有任何带有“微调器”的类，这将隐藏所有这些元素。显示进度的 div 元素有一个“dz-preview”类。正如其他回复中提到的，您可以增加现有类以欺骗 Dropzone 认为上传已完成，或者您可以使用类“dz-preview”清除元素。
