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

【问题标题】：How to show upload progress percentage in dropzone.js如何在 dropzone.js 中显示上传进度百分比
【发布时间】：2016-07-27 18:30:10
【问题描述】：

我在 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 在上述代码中返回的 % 结果，以便用户也可以看到数字。

【问题讨论】：

标签： javascript magento dropzone.js

【解决方案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 + "%";
    }
}

【讨论】：

这很好用。我想添加到这个解决方案中，所以阅读这个的人可能想知道它在选项中，所以要添加到选项中：Dropzone.options.dropzoneIDHere = { uploadprogress: function(file, progress, bytesSent) { } };
在这种情况下，a.previewElement 是什么？它没有在你的代码中定义
@Ben，理想情况下应该是file.previewElement。即使在那之后，如果您遇到任何 querySelector 为 null 的错误，请使用以下行而不是 querySelector 行（或等效的 js 行，如果没有 jquery）$(".progress-text").text(progress + "%")
应该是if (file.previewElement) {

【解决方案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>

【讨论】：

您可能希望使用progress.toFixed(2) 将百分比四舍五入到小数点后两位。
如果你选择使用这个，这个函数现在需要三个参数，(file, progress, bytesSent)