ajax上传文件带进度条的思路
首先，需要2个重要的数据，total（文件总大小）和loaded（已经上传的大小），用 loaded/total，然后不断的更新进度条即可；
问：怎么拿到这两个重要数据呢？
答：在html5中有一个上传过程事件onprogress，在这个事件中可以读到这两个数据loaded和total；上传的时候不断的触发这个函数，然后更新进度条即可；
1 xhr.upload.onprogress = function(ev){ 2 if(ev.lengthComputable){ 3 //有可能文件时分块上传，单块的文件时不能读到大小的 4 var percent = 100*ev.loaded/ev.total; 5 document.getElementById('bar').style.width = percent + '%'; 6 } 7 }
全部代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title> new document </title> 5 <meta name="generator" content="editplus" /> 6 <meta name="author" content="" /> 7 <meta name="keywords" content="" /> 8 <meta name="description" content="" /> 9 <script type="text/javascript"> 10 function selfile(){ 11 //创建formdata对象 12 var fd = new FormData(); 13 //获取文件对象 14 var pic = document.getElementsByTagName('input')[0].files[0]; 15 //追加到formdata里 16 fd.append('pic',pic); 17 var xhr = new XMLHttpRequest(); 18 xhr.open('POST','04-upfile.php',true); 19 xhr.onreadystatechange = function(){ 20 if(this.readyState == 4){ 21 document.getElementById('debug').innerHTML = this.responseText; 22 } 23 } 24 25 //利用XHR2新标准，写监听函数 26 xhr.upload.onprogress = function(ev){ 27 if(ev.lengthComputable){ 28 //有可能文件时分块上传，单块的文件时不能读到大小的 29 var percent = 100*ev.loaded/ev.total; 30 document.getElementById('bar').style.width = percent + '%'; 31 } 32 } 33 xhr.send(fd); 34 35 } 36 </script> 37 <style type="text/css"> 38 #progress{ 39 width:500px; 40 height:30px; 41 border:1px solid green; 42 43 #bar{ 44 width:8%; 45 height:100%; 46 border:1px solid blue; 47 } 48 } 49 </style> 50 </head> 51 52 <body> 53 <div id="progress" > 54 <div id="bar" > 55 56 </div> 57 </div> 58 <input type="file" name = "pic" onchange="selfile();"/> 59 60 <div id="debug" > 61 62 </div> 63 </body> 64 </html>
