Question

我正在尝试测量上传百分比并将结果输出为纯文本以及进度条的值或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) + ' %'));

    }
});

以上是我目前正在使用的内容的一部分，它输出一个舍入百分比+％到div的id为'upload_progress'。我还想将百分比输出到使用html5进度标记的进度条。像<progress id="progressbar" value="X" max="100"></progress>这样的东西，其中X来自javascript。

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

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

很抱歉，如果这应该是显而易见的，我是javascript和编程的新手。我怎么能做这个工作？

由于

Answer 1

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

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操作？您只需设置相应innerHTML的{{1}}即可显示文字百分比。

div

最后确保你打电话给// instead of this: //while (progress.hasChildNodes()) { // progress.removeChild(progress.firstChild); //} //progress.appendChild(document.createTextNode(percent + ' %')); // You can do this: progress.innerHTML = percent + ' %'; 除此之外，我认为您的代码没有任何问题。

在<progress> </progress>中使用javascript请求结果作为值

1 个答案: