• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
深入了解Vue使用vue-qr生成二维码的方法发布时间:2022-02-05
下一篇:
使用JS操作文件(FileReader读取--node的fs)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap