ajax上传进度条

HTML

1
2
3
4
5
<input type="file" name="" id="file">
<div id="wrap">
    <div id="bar"></div>
    <span>0%</span>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#wrap{
    height: 50px;
    border: 5px solid yellow;
    position: relative;
    text-align: center;
    line-height: 50px;
    font-size: 28px;
    font-weight: bold;
}
#bar{
    height: 100%;
    width: 0;
    background: green;
    position: absolute;
    left: 0;
    z-index: -1;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var file = document.getElementById('file');
var wrap = document.getElementById('wrap');
var bar = document.getElementById('bar');
var wrapSpan = wrap.getElementsByTagName('span')[0];
var maxWidth = wrap.clientWidth;
 
file.onchange = function(){
 
    var f = this.files[0];
 
    var xhr = new XMLHttpRequest();
 
    xhr.open('post','php/post_file.php',true);
    xhr.onload = function(){
        console.log(this.responseText);
    };
    //上传过程中触发
    xhr.upload.onprogress = function(ev){
        /*
            ev.total上传文件的总大小
            ev.loaded 当前上传的大小。
        */
        var scale = ev.loaded/ev.total;
        wrapSpan.innerHTML = (scale*100).toFixed(2)+'%';
        bar.style.width = maxWidth*scale+'px';
 
        // console.log(ev.total,ev.loaded);
    }
    var fd = new FormData();
 
    fd.append('file',f);
     
    xhr.send(fd);
};

  

posted @   carol72  阅读(151)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示