如何在dropzone.js中显示上传进度百分比

Question

我在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作为文本在上面的代码中返回,以便用户也可以看到这些数字.

Answer 1

假设你的进度条中有一个跨度,例如:

<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 + "%";
    }
}