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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
JavaScript HTML DOM 元素 (節(jié)點)新增,編輯,刪除操作實例分析
這篇文章主要介紹了JavaScript HTML DOM 元素 (節(jié)點)新增,編輯,刪除操作,結合實例形式分析了JavaScript針對HTML DOM 元素 (節(jié)點)的新增,編輯,刪除相關操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03javascript實現(xiàn)的字符串轉換成數(shù)組操作示例
這篇文章主要介紹了javascript實現(xiàn)的字符串轉換成數(shù)組操作,涉及javascript字符串與數(shù)組相互轉換、以及數(shù)組反轉相關操作技巧,需要的朋友可以參考下2019-06-06微信js-sdk預覽圖片接口及從拍照或手機相冊中選圖接口用法示例
這篇文章主要介紹了微信js-sdk預覽圖片接口及從拍照或手機相冊中選圖接口用法,較為詳細的分析了預覽圖片接口及與拍照或手機相冊中選圖接口的功能、調(diào)用方法與相關使用技巧,需要的朋友可以參考下2016-10-10