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

Answer 2

如此多的方法給貓皮膚......我的實施有什么問題似乎有用嗎？ 雖然百分比絕不是“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>