如何通过FileReader高效读取.txt文件内容？

2026-04-05 17:461阅读0评论SEO资源
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计993个文字，预计阅读时间需要4分钟。

如何通过FileReader高效读取.txt文件内容？

目录：JS通过FileReader获取.txt文件内容 + 读取.txt文件方法 + JS：FileReader读取文件 + 下面开始实际例子 + 读取txt文件 + 读取图片文件 + JS通过FileReader获取.txt文件内容 + 最近处理的一个需求是，通过js解耦。

目录
  • JS通过FileReader获取.txt文件内容
    • 读取.txt文件方法
  • JS: FileReader()读取文件
    • 下面开始实际例子
    • 读取txt文件
    • 读取图片文件

JS通过FileReader获取.txt文件内容

最近处理一个需求是，通过js解析.txt文件来做一些处理，在这里做一些总结。

读取.txt文件方法

var reader = new FileReader(); var fileUploader = document.getElementById(“fileUploader”);//获取input框id来获取文件信息 reader.readAsText(fileUploader.files[0],“utf-8”);//设置编码 reader.onload = function(){undefined data.trim().split('\n').forEach(function(v, i){undefined window[‘str' + (i+1)] = v } }

  • v是.txt中每行文本的内容
  • i是.txt中第几行

获取.txt文件总行数没有直接的方法可以调用，所以我这里用循环来处理：

var count =0; data.trim().split('\n').forEach(function(v, i){undefined count ++; })

JS: FileReader()读取文件

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

属性：

  • FileReader.error 表示在读取文件时发生的错误
  • FileReader.readyState
  • FilerReader.result 读取到的结果

下面开始实际例子

index.html如下

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>FileReader</title> </head> <body> <input id="input" type="file"> </body> </html>

demo.txt如下

this is a demo test

hello world

如何通过FileReader高效读取.txt文件内容？

读取txt文件

<script> const input = document.querySelector('input[type=file]') input.addEventListener('change', ()=>{ const reader = new FileReader() reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件 reader.onload = ()=>{ document.body.innerHTML += reader.result // reader.result为获取结果 } }, false) </script>

读取图片文件

<script> const input = document.querySelector('input[type=file]') input.addEventListener('change', ()=>{ console.log( input.files ) const reader = new FileReader() reader.readAsDataURL(input.files[0]) // input.files[0]为第一个文件 reader.onload = ()=>{ const img = new Image() img.src = reader.result document.body.appendChild(img) // reader.result为获取结果 } }, false) </script>

实例

import java.io.*; public class FileRead { public static void main(String args[]) throws IOException { File file = new File("Hello1.txt"); // 创建文件 file.createNewFile(); // creates a FileWriter Object FileWriter writer = new FileWriter(file); // 向文件写入内容 writer.write("This\n is\n an\n example\n"); writer.flush(); writer.close(); // 创建 FileReader 对象 FileReader fr = new FileReader(file); char[] a = new char[50]; fr.read(a); // 读取数组中的内容 for (char c : a) System.out.print(c); // 一个一个打印字符 fr.close(); } }

方法

方法定义 描述 abort():void 终止文件读取操作 readAsArrayBuffer(file):void 异步按字节读取文件内容，结果用ArrayBuffer对象表示 readAsBinaryString(file):void 异步按字节读取文件内容，结果为文件的二进制串 readAsDataURL(file):void 异步读取文件内容，结果用data:url的字符串形式表示 readAsText(file,encoding):void 异步按字符读取文件内容，结果用字符串形式表示

事件

事件名称 描述 onabort 当读取操作被中止时调用 onerror 当读取操作发生错误时调用 onload 当读取操作成功完成时调用 onloadend 当读取操作完成时调用,不管是成功还是失败 onloadstart 当读取操作将要开始之前调用 onprogress 在读取数据过程中周期性调用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。

标签：通过FileReader获取Txt文件

相关推荐

50332如何用JavaScript编写实现小球触碰浏览器边缘自动反弹的动态效果代码？50340Node_Bower_Angular.Txt中包含哪些Angular库和组件？50345limitScreen.js能如何优化长尾词搜索效果？50355当前时段，如何滚动会议室列表？50356如何将JS中的BASE64编码解码函数改写为长尾？50359如何打造一个既美观又实用的自定义alert和confirm弹出框？50370如何将小练习引入Angular改写为长尾词？50374如何用JavaScript正则表达式验证字符串格式？50377如何使用jQuery实现下拉框Select的复杂操作技巧？50387NodeJS如何实现上传文件功能，涉及哪些长尾词？50397如何将包含长尾词的list字符串转换成JSON对象？50404如何通过mui获取单选和复选框的具体值？50413如何用Node.js将微信语音AMR格式转码成MP3格式？50416如何用H5技术打造一个长尾关键词搜索功能的在线计算器？50418常用的js库有哪些？50419如何判断手机是否已安装该APP，若已安装直接打开，否则引导至应用市场下载？

本文共计993个文字，预计阅读时间需要4分钟。

如何通过FileReader高效读取.txt文件内容？

目录：JS通过FileReader获取.txt文件内容 + 读取.txt文件方法 + JS：FileReader读取文件 + 下面开始实际例子 + 读取txt文件 + 读取图片文件 + JS通过FileReader获取.txt文件内容 + 最近处理的一个需求是，通过js解耦。

目录
  • JS通过FileReader获取.txt文件内容
    • 读取.txt文件方法
  • JS: FileReader()读取文件
    • 下面开始实际例子
    • 读取txt文件
    • 读取图片文件

JS通过FileReader获取.txt文件内容

最近处理一个需求是，通过js解析.txt文件来做一些处理，在这里做一些总结。

读取.txt文件方法

var reader = new FileReader(); var fileUploader = document.getElementById(“fileUploader”);//获取input框id来获取文件信息 reader.readAsText(fileUploader.files[0],“utf-8”);//设置编码 reader.onload = function(){undefined data.trim().split('\n').forEach(function(v, i){undefined window[‘str' + (i+1)] = v } }

  • v是.txt中每行文本的内容
  • i是.txt中第几行

获取.txt文件总行数没有直接的方法可以调用，所以我这里用循环来处理：

var count =0; data.trim().split('\n').forEach(function(v, i){undefined count ++; })

JS: FileReader()读取文件

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

属性：

  • FileReader.error 表示在读取文件时发生的错误
  • FileReader.readyState
  • FilerReader.result 读取到的结果

下面开始实际例子

index.html如下

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>FileReader</title> </head> <body> <input id="input" type="file"> </body> </html>

demo.txt如下

this is a demo test

hello world

如何通过FileReader高效读取.txt文件内容？

读取txt文件

<script> const input = document.querySelector('input[type=file]') input.addEventListener('change', ()=>{ const reader = new FileReader() reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件 reader.onload = ()=>{ document.body.innerHTML += reader.result // reader.result为获取结果 } }, false) </script>

读取图片文件

<script> const input = document.querySelector('input[type=file]') input.addEventListener('change', ()=>{ console.log( input.files ) const reader = new FileReader() reader.readAsDataURL(input.files[0]) // input.files[0]为第一个文件 reader.onload = ()=>{ const img = new Image() img.src = reader.result document.body.appendChild(img) // reader.result为获取结果 } }, false) </script>

实例

import java.io.*; public class FileRead { public static void main(String args[]) throws IOException { File file = new File("Hello1.txt"); // 创建文件 file.createNewFile(); // creates a FileWriter Object FileWriter writer = new FileWriter(file); // 向文件写入内容 writer.write("This\n is\n an\n example\n"); writer.flush(); writer.close(); // 创建 FileReader 对象 FileReader fr = new FileReader(file); char[] a = new char[50]; fr.read(a); // 读取数组中的内容 for (char c : a) System.out.print(c); // 一个一个打印字符 fr.close(); } }

方法

方法定义 描述 abort():void 终止文件读取操作 readAsArrayBuffer(file):void 异步按字节读取文件内容，结果用ArrayBuffer对象表示 readAsBinaryString(file):void 异步按字节读取文件内容，结果为文件的二进制串 readAsDataURL(file):void 异步读取文件内容，结果用data:url的字符串形式表示 readAsText(file,encoding):void 异步按字符读取文件内容，结果用字符串形式表示

事件

事件名称 描述 onabort 当读取操作被中止时调用 onerror 当读取操作发生错误时调用 onload 当读取操作成功完成时调用 onloadend 当读取操作完成时调用,不管是成功还是失败 onloadstart 当读取操作将要开始之前调用 onprogress 在读取数据过程中周期性调用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。