在 AJAX 上传期间显示进度条的百分比值

Question

我似乎无法在我的进度条上显示我当前的上传值。我知道怎么办，如果进度条已经停止了，但是如果我想让它一直更新就不行了。

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        var percentage = (e.loaded / e.total) * 100;
        $('div.progress-bar').css('width', percentage + '%');
    }
};

<div class="progress progress-striped active hide">
    <div style="width: 0%" class="progress-bar progress-bar-striped active">
        <script>
            $("div.progress-bar").text($("div.progress-bar").width() + "%" );
        </script>
    </div>
</div>

进度条本身运行良好。此代码一直输出“0%”，因为初始 width()-value 为 0。我希望它随进度条动态增加。

提前致谢！

Answer 1

您只需要将进度条的text()也设置为：

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        var percentage = (e.loaded / e.total) * 100;
        $('div.progress-bar').css('width', percentage + '%').text(percentage + '%');
    }
};

在 AJAX 上传期间显示进度条的百分比值

Display percentage value of progress bar during AJAX upload

javascript

jquery

dynamic

twitter-bootstrap

progress-bar