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

我想测量上传百分比并输出结果为纯文本和作为进度条或div的宽度的值。使用javascript请求结果作为值<progress>

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”股利。我也想输出百分比到一个使用html5 progress标签的进度条上。像这样的<progress id="progressbar" value="X" max="100"></progress>其中X来自javascript。

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

我想在适当的时候添加这个会有所帮助，但它似乎根本不起作用。

对不起，如果这应该是明显的，我是新的JavaScript和编程一般。我怎么能做这个工作？

谢谢

来源

2013-02-23 Johan

var bar ** = **文档...？ – Bergi 2013-02-23 03:59:23

哇哇谢谢原来，这只是和一些错别字，我觉得很愚蠢。我想这就是我想要在4AM编码 – Johan 2013-02-23 04:13:10

当我输入''，甚至使用JS它似乎工作 – 2013-02-23 05:25:19

首先，确保您在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(...);
除此之外，我看不出有任何问题与您的代码。

来源

2013-02-23 12:06:52

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

回答

相关问题