当前位置:首页 >> 教育精萃
JS文件上传以及进度条实现
发布日期:2018-12-29    点击次数:3231

【字体: 】  【关闭窗口】  【打印该页】

JS文件上传,依靠
<input type="file">
这个标签可以完成文件上传的操作,这里就不细说,这里主要说一下进度条的实现。
想要实现进度条我们需要了解一个对象 XMLHttpRequest  ProgressEvent接口
这个接口有3个属性,都是只读的。
ProgressEvent.lengthComputable  表示当前的工作是否是可测量的,如果为false则loaded和total两个接口不可用,一般这个是true
 ProgressEvent.loaded 表示已完成的进度,只计算文件本身,不包括HTTP请求的开销
 ProgressEvent.total  表示当前工作的总量,只计算文件本身,不包括HTTP请求的开销
下面直接上代码
HTML

<style>
#bar-warp{
    width:500px;
    height:30px;
    border:1px solid green;
}
#bar{
    width:0px;
    height:30px;
    background:green;
}
</style>   
 
//进度条
<div id="bar-warp">
<div id="bar"></div>
 
</div><span id="precent"></span><br/>
<input type="file" name="pic" onchange="upfile();"/>

这里有一个表单上传域,以及一个进度条的样式

JS


<script type="text/javascript">
function upfile(){
    var pic=document.getElementsByTagName('input')[0].files[0];
    var fd=new FormData();
    var xhr=new XMLHttpRequest();
    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);
    
    xhr.send(fd);
    
}
</script>

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

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


相关阅读