JS如何通過FileReader獲取.txt文件內容
更新時間：2021年12月09日 08:40:42 作者：Super維
今天小編就為大家分享一篇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文件總行數沒有直接的方法可以調用，所以我這里用循環(huán)來處理：
var count =0;
data.trim().split('\n').forEach(function(v, i){undefined
count ++;
})
JS: FileReader()讀取文件
FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區(qū)）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
屬性：
FileReader.error表示在讀取文件時發(fā)生的錯誤FileReader.readyStateFilerReader.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);
// 向文件寫入內容
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); // 讀取數組中的內容
for (char c : a)
System.out.print(c); // 一個一個打印字符
fr.close();
}
}
方法
| 方法定義 | 描述 |
|---|---|
| abort():void | 終止文件讀取操作 |
| readAsArrayBuffer(file):void | 異步按字節(jié)讀取文件內容，結果用ArrayBuffer對象表示 |
| readAsBinaryString(file):void | 異步按字節(jié)讀取文件內容，結果為文件的二進制串 |
| readAsDataURL(file):void | 異步讀取文件內容，結果用data:url的字符串形式表示 |
| readAsText(file,encoding):void | 異步按字符讀取文件內容，結果用字符串形式表示 |
事件
| 事件名稱 | 描述 |
|---|---|
| onabort | 當讀取操作被中止時調用 |
| onerror | 當讀取操作發(fā)生錯誤時調用 |
| onload | 當讀取操作成功完成時調用 |
| onloadend | 當讀取操作完成時調用,不管是成功還是失敗 |
| onloadstart | 當讀取操作將要開始之前調用 |
| onprogress | 在讀取數據過程中周期性調用 |
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了webpack學習筆記之代碼分割和按需加載的實例詳解，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了JavaScript控制圖片加載完成后調用回調函數的方法,實例分析了javascript回調函數的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要幫助大家深入理解JS綁定事件，介紹了六種JS綁定事件的情況，感興趣的小伙伴們可以參考一下2016-01-01
javascript與jquery動態(tài)創(chuàng)建html元素示例
這篇文章主要介紹了javascript與jquery動態(tài)創(chuàng)建html元素的方法,結合實例形式分析了javascript與jQuery動態(tài)創(chuàng)建頁面元素的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了JavaScript實現單圖片上傳并預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
再談JavaScript異步編程，簡單描述了幾種JavaScript異步編程模式，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹js重寫alert控件的過程比較適合學習js的新手朋友,需要的朋友可以參考下2014-08-08
整理下面的方法，利用使用js獲取url參數的朋友2008-07-07
這篇文章主要介紹了如何禁止iframe里面的腳本彈出的窗口覆蓋了父窗口,經測試，貌似只能在IE下進行需要的朋友可以參考下2014-09-09
async表示異步,而await可以看作async wait,個人對async與await的簡單理解就是,我們可以用同步的方式去書寫異步代碼,這篇文章主要給大家介紹了關于JS中如何優(yōu)雅的使用async await的相關資料,需要的朋友可以參考下2021-10-10