在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（）值为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 + '%');
    }
};