使用FileReader进行文件分段读取

最新推荐文章于 2023-05-31 22:52:36 发布

爱哭的赵一一

最新推荐文章于 2023-05-31 22:52:36 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_15506981/article/details/109859317

版权

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <!-- 文件上传的框 -->
    <input type="file" name="" id="">
    <!-- 进度条 -->
    <progress max="100" value="0"></progress>
</body>
<script>
    class FileUpLoad {
        constructor(file) {
            this.progress = document.querySelector("progress")
                //实例化一个filereader对象
            this.reader = new FileReader();
            //当前的文件
            this.file = file;
            //分段读取每一段的大小是1M
            this.step = 1024 * 1024;
            // 当前已经读取的位置
            this.loaded = 0;
            // 文件总大小
            this.total = this.file.size;
            //第一次调用
            this.readfile(0);
            // 为FileReader实例绑定事件
            this.readEvent();
        }
        readEvent() {
                // 绑定文件读取中事件
                this.reader.addEventListener("progress", (e) => {
                        // 当前所占的比率
                        this.progress.value = (this.loaded / this.total) * 100

                    })
                    // 绑定文件读取成功事件,每一小段读取完之后都会调用次方法
                this.reader.addEventListener("load", (e) => {
                    console.log(this.reader.result);
                    this.loaded += e.loaded;
                    this.getfile()
                })
            }
            // 读取文件
        readfile(start) {
            let blob
                // 如果slice方法存在那么就分段,相当于切片
            if (this.file.slice) {
                blob = this.file.slice(start, start + this.step)
            } else {
                blob = this.file
            }
            this.reader.readAsText(blob, "utf-8")
        }

        getfile() {
            //如果当前已读取的小于总文件大小那么久继续调用
            if (this.loaded < this.total) {
                this.readfile(this.loaded)
            } else {
                // 读取完成后将进度条置为100%
                this.progress.value = (this.loaded / this.total) * 100
                    // alert("读取成功!")
            }
        }
    }

    const finput = document.querySelector("input")
    finput.addEventListener("change", () => {
        new FileUpLoad(finput.files[0])
    })
</script>

</html>

爱哭的赵一一

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
使用FileReader进行文件分段读取

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title></head><body> <!-- 文件上传的框 --&g
复制链接

扫一扫