实现上传进度条

JS文件上传，依靠

<input type="file">这个标签可以完成文件上传的操作，这里就不细说，这里主要说一下进度条的实现。

想要实现进度条我们需要了解一个对象 XMLHttpRequest ProgressEvent接口

这个接口有3个属性,都是只读的。

ProgressEvent.lengthComputable 表示当前的工作是否是可测量的，如果为false则loaded和total两个接口不可用，一般这个是true
ProgressEvent.loaded 表示已完成的进度，只计算文件本身，不包括HTTP请求的开销
ProgressEvent.total 表示当前工作的总量，只计算文件本身，不包括HTTP请求的开销
下面直接上代码

#bar-warp{
    width:500px;
    height:30px;
    border:1px solid green;
}
#bar{
    width:0px;
    height:30px;
    background:green;
} 

//进度条

<div id="bar-warp">
<div id="bar"></div>
</div><span id="precent"></span><br/>
<input type="file" name="pic" onchange="upfile();"/>

function upfile() {
    var pic = document.getElementsByTagName('input')[0].files[0];
    var fd = new FormData();//利用FormData传参
    var xhr = new XMLHttpRequest();
    //xhr.setRequestHeader('token',sessionStorage.getItem('token'))加token
    xhr.open('post', '01.php', true);
    xhr.onreadystatechange = function () {
        //readystate为4表示请求已完成并就绪
        if (this.readyState == 4) {
            document.getElementById('precent').innerHTML = this.responseText;
            //在进度条下方插入百分比
        }
    }
    xhr.upload.onprogress = function (ev) {
        //如果ev.lengthComputable为true就可以开始计算上传进度
        //上传进度 = 100* ev.loaded/ev.total
        if (ev.lengthComputable) {
            var precent = 100 * ev.loaded / ev.total;
            console.log(precent);
            //更改进度条，及百分比
            document.getElementById('bar').style.width = precent + '%';
            document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
        }
    }
    fd.append('pic', pic);//FormData传参
    xhr.send(fd);
}

1、js检测 ev.lengthComputable 进度并开始计算上传进度

2、上传进度百分比= 100* ev.loaded/ev.total