快捷導(dǎo)航

JS如何通過FileReader獲取.txt文件內(nèi)容

更新時(shí)間：2021年12月09日 08:40:42 作者：Super維

今天小編就為大家分享一篇JS如何通過FileReader獲取.txt文件內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

JS通過FileReader獲取.txt文件內(nèi)容

最近處理一個(gè)需求是，通過js解析.txt文件來做一些處理，在這里做一些總結(jié)。

讀取.txt文件方法

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

v是.txt中每行文本的內(nèi)容
i是.txt中第幾行

獲取.txt文件總行數(shù)沒有直接的方法可以調(diào)用，所以我這里用循環(huán)來處理：

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

JS: FileReader()讀取文件

FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

屬性：

FileReader.error 表示在讀取文件時(shí)發(fā)生的錯(cuò)誤
FileReader.readyState
FilerReader.result 讀取到的結(jié)果

下面開始實(shí)際例子

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]為第一個(gè)文件
    reader.onload = ()=>{
      document.body.innerHTML += reader.result  // reader.result為獲取結(jié)果
    }
  }, 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]為第一個(gè)文件
    reader.onload = ()=>{
      const img = new Image()
      img.src = reader.result
      document.body.appendChild(img)  // reader.result為獲取結(jié)果
    }
  }, false)
  </script>

實(shí)例

import java.io.*;
public class FileRead {
    public static void main(String args[]) throws IOException {
        File file = new File("Hello1.txt");
        // 創(chuàng)建文件
        file.createNewFile();
        // creates a FileWriter Object
        FileWriter writer = new FileWriter(file);
        // 向文件寫入內(nèi)容
        writer.write("This\n is\n an\n example\n");
        writer.flush();
        writer.close();
        // 創(chuàng)建 FileReader 對(duì)象
        FileReader fr = new FileReader(file);
        char[] a = new char[50];
        fr.read(a); // 讀取數(shù)組中的內(nèi)容
        for (char c : a)
            System.out.print(c); // 一個(gè)一個(gè)打印字符
        fr.close();
    }
}

方法

方法定義	描述
abort():void	終止文件讀取操作
readAsArrayBuffer(file):void	異步按字節(jié)讀取文件內(nèi)容，結(jié)果用ArrayBuffer對(duì)象表示
readAsBinaryString(file):void	異步按字節(jié)讀取文件內(nèi)容，結(jié)果為文件的二進(jìn)制串
readAsDataURL(file):void	異步讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示
readAsText(file,encoding):void	異步按字符讀取文件內(nèi)容，結(jié)果用字符串形式表示

事件

事件名稱	描述
onabort	當(dāng)讀取操作被中止時(shí)調(diào)用
onerror	當(dāng)讀取操作發(fā)生錯(cuò)誤時(shí)調(diào)用
onload	當(dāng)讀取操作成功完成時(shí)調(diào)用
onloadend	當(dāng)讀取操作完成時(shí)調(diào)用,不管是成功還是失敗
onloadstart	當(dāng)讀取操作將要開始之前調(diào)用
onprogress	在讀取數(shù)據(jù)過程中周期性調(diào)用