欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年12月09日 08:40:42   作者:Super維  
今天小編就為大家分享一篇JS如何通過FileReader獲取.txt文件內(nèi)容,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

最近處理一個需求是,通過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中每行文本的內(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 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容,使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。

屬性:

  • FileReader.error 表示在讀取文件時發(fā)生的錯誤
  • 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");
        // 創(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 對象
        FileReader fr = new FileReader(file);
        char[] a = new char[50];
        fr.read(a); // 讀取數(shù)組中的內(nèi)容
        for (char c : a)
            System.out.print(c); // 一個一個打印字符
        fr.close();
    }
}

方法

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

事件

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

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

最新評論