上傳進度股利增加

Question

function uploadToServer(){ 
fileField = document.getElementById("uploadedFile"); 
var fileToUpload = fileField.files[0]; 
var xhr = new XMLHttpRequest(); 
var uploadStatus = xhr.upload; 
uploadStatus.addEventListener("progress", function (ev) { 
     if (ev.lengthComputable) { 
      $("#uploadPercentage").html((ev.loaded/ev.total) * 100 + "%"); 
     } 
    }, false); 

uploadStatus.addEventListener("error", function (ev) {$("#error").html(ev)}, false); 
uploadStatus.addEventListener("load", function (ev) {$("#error").html("sorry!")}, false); 

xhr.open(
     "POST", 
     "serverUpload.php", 
     true 
     ); 
    xhr.setRequestHeader("Cache-Control", "no-cache"); 
    xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
    xhr.setRequestHeader("X-File-Name", fileToUpload.fileName); 
    xhr.setRequestHeader("X-File-Size", fileToUpload.fileSize); 
    xhr.setRequestHeader("X-File-Type", fileToUpload.type); 
    //xhr.setRequestHeader("Content-Type", "application/octet-stream"); 
    xhr.send(fileToUpload); 

}

$（函數（）{

$("#uploadButton").click(uploadToServer); 

}）;

`

<form action="" name="uploadForm" method="post" enctype="multipart/form-data"> 

。在這個代碼是工作的罰款。但我需要增加div大小。但是這個只顯示百分比。我必須改變才能獲得第一個。

Answer 1

波紋管是使用HTML5

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress> 
<span id="status"></span> 
<h1 id="finalMessage"></h1> 
<script type="text/javascript" language="javascript"> 
function progressBarSim(al) { 
    var bar = document.getElementById('progressBar'); 
    var status = document.getElementById('status'); 
    status.innerHTML = al+"%"; 
    bar.value = al; 
    al++; 
    var sim = setTimeout("progressBarSim("+al+")",300); 
    if(al == 100){ 
    status.innerHTML = "100%"; 
    bar.value = 100; 
    clearTimeout(sim); 
    var finalMessage = document.getElementById('finalMessage'); 
    finalMessage.innerHTML = "Process is complete"; 
} 
    } 
    var amountLoaded = 0; 
    progressBarSim(amountLoaded); 
</script> 

它可以幫助你，解決你的編碼這個代碼簡單進度代碼。