首先，需要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>
时间： 2024-10-13 16:07:19