要實現進度條的顯示,就要知道兩個參數，上傳的大小和總文件的大小 html5提供了一個上傳過程事件，在上傳過程中不斷觸發，然后用已上傳的大 小/總大小,計算上傳的百分比,然后用這個百分比控制div框的顯示，就可以 實現上傳的進度條效果
前端頁面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax上傳文件進度條顯示</title>
<script type="text/javascript">
function upfile(){
var pic=document.getElementsByTagName('input')[0].files[0];
var fd=new FormData();
var xhr=new XMLHttpRequest();
xhr.open('post','01.php',true);
xhr.onreadystatechange=function (){
if(this.readyState==4){
document.getElementById('precent').innerHTML=this.responseText;
}
}
xhr.upload.onprogress=function (ev){
//console.log(ev);控制台打印progress { target: XMLHttpRequestUpload, isTrusted: true, lengthComputable: true,
//loaded: 15020, total: 15020, eventPhase: 0, bubbles: false, cancelable: false, defaultPrevented: false,
//timeStamp: 1445144855459000, originalTarget: XMLHttpRequestUpload }
if(ev.lengthComputable){
var precent=100 * ev.loaded/ev.total;
console.log(precent);
document.getElementById('nei').style.width=precent+'%';
document.getElementById('precent').innerHTML=Math.floor(precent)+'%';
}
}
fd.append('pic',pic);
xhr.send(fd);
}
</script>
<style>
#wai{
width:500px;
height:30px;
border:1px solid green;
}
#nei{
width:0px;
height:30px;
background:green;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei"></div>
</div><span id="precent"></span><br/>
<input type="file" name="pic" onchange="upfile();"/>
</body>
</html>
頁面顯示效果
