纯JS实现上传进度条

最新推荐文章于 2022-07-14 14:30:47 发布

编程迪

最新推荐文章于 2022-07-14 14:30:47 发布

阅读量488

点赞数

本文链接：https://blog.csdn.net/zd1007129657/article/details/117551494

版权

原理：无论是原生XMLHttpRequest请求还是ajax请求 upload对象下都有一个progress函数会实时返回当前已上传的文件大小 axios 对应的是onUploadProgress这个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传进度条</title>
</head>
<style>
    #bar-warp{
        width:500px;
        height:30px;
        border:1px solid green;
    }
    #bar{
        width:0px;
        height:30px;
        background:green;
    }
</style>
<body>
    <input type="file" id="myFile" onchange="upfile();"/>
    <div id="bar-warp"><div id="bar"></div></div>
    <span id="precent"></span><br/>
</body>
<script>
    function upfile() {
        var formData = new FormData();
        var fileInput = document.getElementById("myFile");
        var file = fileInput.files[0];
        var xhr = new XMLHttpRequest();
        xhr.open('post', '上传地址', true);
        xhr.upload.onprogress = function (ev) {
            //如果ev.lengthComputable为true就可以开始计算上传进度
            //上传进度 = 100* ev.loaded/ev.total
            if (ev.lengthComputable) {
                console.log(ev.loaded,ev.total)
                var precent = 100 * ev.loaded / ev.total;
                //更改进度条，及百分比
                document.getElementById('bar').style.width = precent + '%';
                document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
            }
        };
        formData.append("file", file);
        xhr.send(formData);
        xhr.onreadystatechange = function () {
            //readystate为4表示请求已完成并就绪
            if (this.status === 200) {
                //在进度条下方插入百分比
                console.log('上传完成')
            }
        };
    }
</script>
</html>

编程迪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯JS实现上传进度条

原理：无论是原生XMLHttpRequest请求还是ajax请求 upload对象下都有一个progress函数会实时返回当前已上传的文件大小axios 对应的是onUploadProgress这个函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传进度条</title></head><sty.
复制链接

扫一扫