【原生javascript】读取文件

最新推荐文章于 2024-08-28 12:34:01 发布

精灵福将马国成

最新推荐文章于 2024-08-28 12:34:01 发布

阅读量1.1k

点赞数

分类专栏：原生javascript

本文链接：https://blog.csdn.net/weixin_42705570/article/details/87279804

版权

原生javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

FileReader FileReader 接口有3个用来读取文件方法返回结果在result中：

readAsBinaryString —将文件读取为二进制编码

readAsText —将文件读取为文本

readAsDataURL —将文件读取为DataURL

废话少说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件读取</title>
</head>
<body>
    <input type="file">

<script>
    var input = document.querySelector("input")
    input.onchange=function(){

        /*
        查看this里的属性
        for(var key in this) {
            console.log(this[key]);
        }
        */
        // 获取文件
        var files = this.files[0];

        // 开始读取，创建读取器
        var reader = new FileReader();

        // 开始读取
        reader.readAsText(files)

        // 文件读取完成后，获取文件内容
        reader.onload = function() {
            // 获取结果
            console.log(reader.result);
        }
    }
</script>
</body>
</html>