当前位置 : 主页 > 网络编程 > JavaScript >

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

来源:互联网 收集:自由互联 发布时间:2022-04-19
目录 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

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

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

上一篇:使用JS操作文件(FileReader读取--node的fs)
下一篇:没有了
网友评论