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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。