html5 通过xhr生成上传下载进度条

最新推荐文章于 2023-11-06 14:11:41 发布

@小白—

最新推荐文章于 2023-11-06 14:11:41 发布

阅读量407

点赞数 1

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/fm521521/article/details/132648443

版权

HTML5 通过 XHR2（XMLHttpRequest Level 2）对象提供了一种方便的方式来上传和下载文件，并且可以同时追踪文件的进度。所以，我们可以用 XHR2 对象来实现上传下载进度条。

下面是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传下载进度条</title>
</head>
<body>
    <div>
        <h3>上传文件</h3>
        <input type="file" id="file">
        <progress id="upload-bar" value="0" max="100"></progress>
    </div>
    <div>
        <h3>下载文件</h3>
        <button id="download">下载</button>
        <progress id="download-bar" value="0" max="100"></progress>
    </div>

    <script>
        var xhr;

        function uploadFile() {
            var fileInput = document.getElementById('file');
            var progressBar = document.getElementById('upload-bar');

            xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(event) {
                if (event.lengthComputable) {
                    var percentage = Math.round((event.loaded * 100) / event.total);
                    progressBar.value = percentage;
                }
            }, false);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert('上传成功');
                        progressBar.value = 0;
                    } else {
                        alert('上传失败');
                    }
                }
            };

            xhr.open('POST', 'upload.php', true);
            xhr.send(fileInput.files[0]);
        }

        function downloadFile() {
            var progressBar = document.getElementById('download-bar');

            xhr = new XMLHttpRequest();
            xhr.addEventListener("progress", function(event) {
                if (event.lengthComputable) {
                    var percentage = Math.round((event.loaded * 100) / event.total);
                    progressBar.value = percentage;
                }
            }, false);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert('下载成功');
                    } else {
                        alert('下载失败');
                    }
                    progressBar.value = 0;
                }
            };

            xhr.open('GET', 'download.php', true);
            xhr.responseType = 'blob';
            xhr.send();
        }

        document.getElementById('file').addEventListener('change', uploadFile);
        document.getElementById('download').addEventListener('click', downloadFile);
    </script>
</body>
</html>

在上面的例子中，我们定义了一个 uploadFile 函数来上传文件，并且在上传过程中更新进度条。我们还定义了一个 downloadFile 函数来下载文件，并且在下载过程中更新进度条。最后，我们使用 addEventListener 来监听上传文件和下载文件的事件。

总结来说，HTML5 提供了一种简单、方便的方式来上传下载文件，并且可以追踪文件的进度。我们可以使用 XHR2 对象来实现上传下载进度条。

@小白—

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
html5 通过xhr生成上传下载进度条

（XMLHttpRequest Level 2）对象提供了一种方便的方式来上传和下载文件，并且可以同时追踪文件的进度。总结来说，HTML5 提供了一种简单、方便的方式来上传下载文件，并且可以追踪文件的进度。函数来上传文件，并且在上传过程中更新进度条。函数来下载文件，并且在下载过程中更新进度条。来监听上传文件和下载文件的事件。在上面的例子中，我们定义了一个。对象来实现上传下载进度条。对象来实现上传下载进度条。
复制链接

扫一扫