實現上傳進度條

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