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

浏览数：29 / 时间：2015年06月09日

　　首先，需要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>