HTML5 진행 요소 스크립팅

큰 이미지 파일의 다운로드 진행률을 표시하기 위해 HTML5 진행 요소를 표시하려고합니다.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>

출처

2013-02-22 Nick

당신이 Adobe has a great example there (이미지 다른, 또는 아무것도를로드 할 수있다)를 XMLHttpRequest의 진행 상황을 추적하기 위해 찾고 있습니다. 당신이 무엇을 할 수 있는지보고 싶다면,

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 : Ctrl 키 + U 당신의 친구 :

는 기본적으로, 당신이 그렇게 할 것입니다. 지금은 그것에 대해 생각 나는 이유는 e.totalprogressBar.max로 사용하지 않는보고, 단순히 progressBar.value

출처

2013-03-05 21:24:44 1ace

에 e.loaded을 밀어 봐 1ace : 당신 :

PS에 대한 충분

희망 , 고맙습니다! 나는 어도비 (내가 그것을 놓쳤던 방법을 모르고있다, 나는 약간의 온라인으로 점검했다)와 Mozilla를 조사했다. 제안을 테스트 한 결과 ... 완벽하게 작동합니다. 매우 감사! – Nick

답변

관련 문제