0

我正在尝试测量上传百分比并将结果输出为纯文本以及进度条或 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 和一般编程很陌生。我怎样才能使这项工作？

谢谢

4

1 回答 1

0

首先，确保在 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相应的div以显示百分比文本。

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

// You can do this:
progress.innerHTML = percent + ' %';

最后确保您正在调用request.open(...);
除此之外我没有看到您的代码有任何问题。

于 2013-02-23T12:06:52.087 回答