js FileReader对象

FileReaderd对象

<!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>
</head>
<body>

    <input type="file" class="input_file">

    <button class="button_text">读取文本文件</button>

    <script>
        /*
         *  FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
         *  FileReader 的实例拥有 4 个⽅法,其中 3 个⽤以读取⽂件,另⼀个⽤来中断读取
         *  方法:
         *      abort none 用于中断读取读取
         *      readAsBinaryString file 将文件读取为二进制码
         *      readAsDataURL file   将文件读取为DataURL
         *      readAsText  file,[encoding] 将文件读取为文本
         *  方法解读:
         *      readAsText:该⽅法有两个参数,其中第⼆个参数是⽂本的编码⽅式,默认值为 UTF-8。这个⽅法⾮常容易理解,将⽂件以⽂本⽅式读取,读
         *      取的结果即是这个⽂本⽂件中的内容。
         *      readAsBinaryString:该⽅法将⽂件读取为⼆进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储⽂件。
         *      readAsDataURL:这是例⼦程序中⽤到的⽅法,该⽅法将⽂件读取为⼀段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data
         *      URL是⼀种将⼩⽂件直接嵌⼊⽂档的⽅案。这⾥的⼩⽂件通常是指图像与 html 等格式的⽂件。(其中base64的⽅式就是由此来获得的。。)
         * 
         *  FileReader处理事件:
         *      FileReader 包含了⼀套完整的事件模型,⽤于捕获读取⽂件时的状态
         *          onabort 中断时触发
         *          onerror 出错时触发
         *          onload  文件读取成功
         *          onloadend 读取完成触发,不管成功或者失败
         *          onloadstart: 开始读取文件时触发
         *          onprogress:读取文件过程中触发
         * 
         *  属性:
         *      ⽂件⼀旦开始读取,⽆论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝⼤多数
         *      的程序都会在成功读取⽂件的时候,抓取这个值
         */

        let file = document.querySelector(".input_file")

        // 测试读取文本文件
        let button_text = document.querySelector('.button_text')
        button_text.addEventListener('click',()=>{

            let fileText = file.files[0]

            let reader = new FileReader();
            
            // 第一个参数为获取的文件,第二个参数为编码格式,默认 "UTF-8"
            reader.readAsText(fileText)

            reader.onloadstart = function(){

                console.log("文件开始读取");

            }

            reader.onprogress = function(){

                console.log("文件读取中");

            }

            reader.onabort = function(){

                console.log("读取文件被中断");

            }

            reader.onerror = function (){

                console.log("读取文件失败");

            }

            reader.onload = function () {

                // result 属性为当前获取的值
                console.log(this.result);
                console.log("读取文件成功");

            }

        })
         

    </script>
</body>
</html>

你可能感兴趣的:(js,javascript,前端,开发语言)