< 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 > < 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 > function read File(){ var file=document.getElementById("file").files[0]; var read er =new FileReader (); var result=document.getElementById("result"); 作者： 罗培发 撰写时间：2020.9.16 HTML5定义了 FileReader 作为文件API的重要成员用于读取文件，根据W3C的定义， FileReader 接口提供了读取文件的方法和包含读取结果的事件模型。 1、检测浏览器对 FileReader 的支持 1 if(window. FileReader ) { var 2 fr = new FileReader (); 3 // add your code h er e 4 } else 前一篇文章介绍了HTML5中的Blob 对象 （详情戳这里），从中了解到Blob 对象 只是二进制数据的容器，本身并不能操作二进制，故本篇将对其操作 对象 FileReader 进行介绍。 FileReader FileReader 主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 使用 FileReader 对象 ，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始...