我在magento中使用dropzone.js来上传文件。进度条工作正常,但我也想显示进度百分比。以下功能是为跨度添加样式。
uploadprogress: function(a, b) {
var c, d, e, f, g;
if (a.previewElement) {
for (f = a.previewElement.querySelectorAll("[data-dz-uploadprogress]"), g = [], d = 0, e = f.length; e > d; d++) c = f[d], g.push("PROGRESS" === c.nodeName ? c.value = b : c.style.width = "" + b + "%");
return g
}
},
在以下html中添加style =“width:xx%”。
我还想显示%结果,其中g作为文本返回上面的代码,以便用户也能看到这些数字。
答案 0 :(得分:8)
假设您的进度条中有一个范围,例如:
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" data-dz-uploadprogress>
<span class="progress-text"></span>
</div>
</div>
您应该按如下方式定义uploadprogress函数:
uploadprogress: function(file, progress, bytesSent) {
if (file.previewElement) {
var progressElement = file.previewElement.querySelector("[data-dz-uploadprogress]");
progressElement.style.width = progress + "%";
progressElement.querySelector(".progress-text").textContent = progress + "%";
}
}
答案 1 :(得分:1)
有很多方法可以给猫咪剥皮...我的实现似乎有什么问题吗?尽管该百分比没有舍入为“ 10.12345678%”。
myDropzone.on("totaluploadprogress", function (progress) {
$("#the-progress-div").width(progress + '%');
$(".the-progress-text").text(progress + '%');
});
我在html中使用它:
<div id="the-progress-div">
<span class="the-progress-text"></span>
</div>