超级简单的文件上传进度条实现

最新推荐文章于 2024-07-19 15:32:49 发布

呆呆papa

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量3.7k

点赞数 4

分类专栏： HTML 文章标签： javascript ajax css

本文链接：https://blog.csdn.net/weixin_42089228/article/details/127593963

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文件上传进度条实现的核心就是对文件上传进度的监听，在前端通过ajax发送请求，可以对XMLHttpRequest.upload的onprogress事件进行监听，从loaded属性中获取已上传的文件大小，以此实时改变进度条的width属性，具体实现如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }

        .uploader {
            display: flex;
            align-items: center;
        }

        .slider-track {
            width: 70vw;
            height: 8px;
            background-color: #080101;
            margin: 20px 10px 20px 0;
            border-radius: 4px;
        }

        .slider-bar {
            height: 8px;
            width: 0px;
            border-radius: inherit;
            background-image: linear-gradient(to right, #018eb2, #29c9eb);
            transition: width;
        }
    </style>
</head>

<body>
    <input type="file" onchange="uploadFile(this.files)">
    <div class="uploader">
        <div class="slider-track">
            <div class="slider-bar"></div>
        </div>
        <div>
            <span class="percentage">0</span>%
        </div>
    </div>
    <script>
        function uploadFile(files) {
            let fd = new FormData();
            fd.append('file', files[0], "1.jpg")
            let xhr = new XMLHttpRequest();
            let sliderBar = document.querySelector(".slider-bar")
            sliderBar.style.width = "0"
            xhr.upload.addEventListener("progress", function (e) {
                let percentage = e.loaded / e.total * 100
                sliderBar.style.width =  `${percentage}%`
                document.querySelector(".percentage").innerHTML = `${percentage.toFixed(2)}`
            })
            xhr.open('post', 'http://localhost:80/upload')
            xhr.send(fd)
        }
    </script>
</body>

</html>

你可能需要了解的：

👉 MDN-使用 XMLHttpRequest

👉 MDN-XMLHttpRequest.upload

呆呆papa

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
4
评论
超级简单的文件上传进度条实现

文件上传进度条实现的核心就是对文件上传进度的监听，在前端通过ajax发送请求，可以对XMLHttpRequest.upload的onprogress事件进行监听，从loaded属性中获取已上传的文件大小
复制链接

扫一扫