使用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>

回答

相關問題