HTML5 进度元素脚本答案

【问题标题】：HTML5 Progress Element ScriptingHTML5 进度元素脚本
【发布时间】：2013-02-22 02:11:17
【问题描述】：

我正在尝试显示一个 HTML5 进度元素来显示大图像文件的下载进度。

我已经检查了该论坛上已经发布的类似问题的一些答案，但他们似乎没有直接回答这个问题（或者更可能只是我的无知）或者他们非常技术性，因此远远超出了我的范围。

我已经下载了一个 HTML5 / JavaScript 示例文件，其中显示了基本方法（参见下面的代码），但我不知道如何将此脚本链接到我的图片下载。

任何建议将不胜感激。

<!DOCTYPE html>
<html>
<head>
<title>Developer Drive | Displaying the Progress of Tasks with HTML5 | Demo</title>
<script type="text/javascript">

var currProgress = 0;

var done = false;

var total = 100;

function startProgress() {

var prBar = document.getElementById("prog");

var startButt = document.getElementById("startBtn");

var val = document.getElementById("numValue");

startButt.disabled=true;

prBar.value = currProgress;

val.innerHTML = Math.round((currProgress/total)*100)+"%";

currProgress++;

if(currProgress>100) done=true;

if(!done)
setTimeout("startProgress()", 100);

else    
{
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
}
}
</script>
</head>
<body>

<p>Task progress:</p>
<progress id="prog" value="0" max="100"></progress> 
<input id="startBtn" type="button" value="start" onclick="startProgress()"/>
<div id="numValue">0%</div>

</body>
</html>

【问题讨论】：

标签： html progress

【解决方案1】：

如果您希望跟踪XMLHttpRequest（可能正在加载图像或其他任何内容）的进度，请Adobe has a great example there。 Ctrl+U 是你的朋友 :)

基本上，你会想要这样做：

var xhr = new XMLHttpRequest();
xhr.onprogress = function(e){

  // This tests whether the server gave you the total number of bytes that were
  // about to be sent; some servers don't (this is config-dependend), and
  // without that information you can't know how far along you are
  if (e.lengthComputable)
  {

    // e.loaded contains how much was loaded, while e.total contains
    // the total size of the file, so you'll want to get the quotient:
    progressBar.value = e.loaded / e.total * 100;

  }
  else
  {
    // You can't know the progress in term of percents, but you could still
    // do something with `e.loaded`
  }
};

Mozilla's Developer site has some more details，如果你想看看可以做什么。

希望这对你来说已经足够了:)

PS：现在我想了想，我认为没有理由不将e.total 用作progressBar.max，只需将e.loaded 推入progressBar.value

【讨论】：

嘿1ace，谢谢！我检查了 Adobe（不知道我是怎么错过的，我在网上做了一些检查）和 Mozilla。已经测试了您的建议……效果很好。非常感谢！