在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％”，因为初始宽度（） - 值为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 + '%');
    }
};