web-dev-qa-db-ja.com

dropzone.jsでアップロードの進行状況のパーセンテージを表示する方法

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％"を追加します。

また、ユーザーが数値も表示できるように、上記のコードでスパンに返される結果の％をテキストとして表示したいと思います。

javascriptmagentodropzone.js
5
user1726932

たとえば、プログレスバーに次のようなスパンがあると仮定します。

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

猫の皮を剥ぐ方法はたくさんあります...私の実装に問題があるようですが、うまくいくようです。パーセンテージは決して「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>
2
Callum