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

Question

I can't seem to display my current upload value on my progress bar. I know how to do it, if the progress bar has stopped, but it won't work if I want it to update all the time.

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>

The progress bar itself runs fine. This code just outputs "0%" all the time, as the initial width()-value is 0. I want it to increase along with the progress bar dynamically.

Thanks in advance!

Answer 1

You just need to also set the text() of the progress bar too:

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