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

更新时间：2021年12月09日 08:40:42 作者：Super维

今天小编就为大家分享一篇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

读取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	在读取数据过程中周期性调用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript实现打地鼠小游戏
这篇文章主要为大家详细介绍了JavaScript实现打地鼠小游戏的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
js之切换全屏和退出全屏实现代码实例
这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
uni-app表单组件(form表单)用法举例
平时我们经常会使用到表单,下面这篇文章主要给大家介绍了关于uni-app表单组件(form表单)的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
javascript获取下拉列表框当中的文本值示例代码
需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，下面与大家分享下如何使用js获取下拉列表框文本值，由此需求的朋友可以参考下
2013-07-07
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
JavaScript中解决闭包只能取得包含函数中任何变量最后一个值的问题
2010-08-08
JavaScript中forEach的错误用法汇总
js中foreach是用于遍历数组的方法,将遍历到的元素传递给回调函数,遍历的数组不能是空的要有值,下面这篇文章主要给大家介绍了关于JavaScript中forEach的错误用法,需要的朋友可以参考下
2022-06-06
postMessage消息通信Promise化的方法实现
postMessage Api 想必大家都不陌生,WebWorker 通信会用到,iframe 窗口之间通信也会用到,那么我们能不能将 postMessage 进行一次转化,把他变成类似 Promise 的使用方式,所以本文给大家介绍了postMessage消息通信Promise化的方法实现,需要的朋友可以参考下
2024-03-03
JSON.stringify的多种用法总结
这篇文章主要给大家介绍了关于JSON.stringify使用的相关资料, JSON.stringify()方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,需要的朋友可以参考下
2021-06-06
js汉字转拼音实现代码
汉字转拼音,比较娱乐的一款应用，感兴趣的朋友可以了解下，或许对你学习js有所帮助
2013-02-02
Promise 链式调用原理精简示例
这篇文章主要为大家介绍了Promise 链式调用原理精简示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12