首页 > 代码库 > ajax上传文件带进度条的思路

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>

 

ajax上传文件带进度条的思路