使用javascript请求结果作为<进度>

Using javascript request result as value in <progress>

本文关键字：lt 进度 gt javascript 请求 结果 使用      更新时间：2023-09-26

我正在尝试测量上传百分比，并将结果输出为纯文本和进度条或div宽度的值。

    var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function (event) {
    if (event.lengthComputable) {
        var percent = event.loaded / event.total;
        var progress = document.getElementById('upload_progress');
        while (progress.hasChildNodes()) {
            progress.removeChild(progress.firstChild);
        }
        progress.appendChild(document.createTextNode(Math.round(percent * 100) + ' %'));
    }
});

上面是我目前使用的一部分，它向id为"upload_progress"的div输出一个取整百分比+%。我还想将百分比输出到使用html5进度标记的进度条。类似于<progress id="progressbar" value="X" max="100"></progress>，其中X来自javascript。

var bar = document.getElementById('progressbar')
bar.value = (Math.round(percent * 100))

我认为在适当的地方添加它会有所帮助，但它似乎根本不起作用。

很抱歉，如果这是显而易见的，我是javascript和编程的新手。我怎么能做到这一点？

感谢

首先，确保在DOM完全加载后获得元素。此外，您应该在progress事件处理程序中设置进度百分比value。

var progress, bar;
window.onload = function() {
    progress = document.getElementById('upload_progress');
    bar = document.getElementById('progressbar');
}
var request = new XMLHttpRequest();
request.upload.addEventListener('progress', function (event) {
    if (event.lengthComputable) {
        var percent = Math.round(event.loaded / event.total * 100);
        bar.value = percent;
        // other code here...
    }
});

为什么要做这么多DOM操作？您只需设置相应div的innerHTML即可显示百分比文本。

// instead of this:
//while (progress.hasChildNodes()) {
//    progress.removeChild(progress.firstChild);
//}
//progress.appendChild(document.createTextNode(percent + ' %'));
// You can do this:
progress.innerHTML = percent + ' %';

最后确保您正在呼叫request.open(...);
除此之外，我认为您的代码没有任何问题。

相关文章：