JS の FileReader を介して .txt ファイルの内容を取得する方法

JSはFileReaderを通じて.txtファイルの内容を取得します。

最近、いくつかの処理を行うために js を介して .txt ファイルを解析する要件に対処しています。以下に概要を示します。

.txtファイルの読み取り方法

var リーダー = 新しい FileReader();
var fileUploader = document.getElementById("fileUploader"); //ファイル情報を取得するための入力ボックスIDを取得します reader.readAsText(fileUploader.files[0], "utf-8"); //エンコーディングを設定します reader.onload = function() { undefined
data.trim().split('\n').forEach(function(v, i){未定義
ウィンドウ['str' + (i+1)] = v
}
}

vは.txt内の各行のテキストの内容です
i .txt 内の行番号です

.txt ファイル内の行の総数を取得する直接的な方法はないので、ここではループを使用して処理します。

var カウント =0;
data.trim().split('\n').forEach(function(v, i){未定義
カウント++;
})

JS: FileReader() はファイルを読み取ります

FileReader オブジェクトを使用すると、Web アプリケーションは、File または Blob オブジェクトを使用して読み取るファイルまたはデータを指定し、ユーザーのコンピューターに保存されているファイル (または生データバッファー) の内容を非同期的に読み取ることができます。

財産：

FileReader.error 、ファイルの読み取り中にエラーが発生したことを示します。
FileReader.readyState
FilerReader.result読み取られた結果

実例から始めましょう

index.htmlは以下のとおりです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>ファイルリーダー</title>
</head>
<本文>
<input id="入力" type="ファイル">
</本文>
</html>

demo.txtは以下のとおりです

これはデモテストです
こんにちは世界

txt ファイルの読み取り

<スクリプト>
  const input = document.querySelector('input[type=file]')
  input.addEventListener('change', ()=>{
    const リーダー = 新しい FileReader()
    reader.readAsText(input.files[0],'utf8') // input.files[0]は最初のファイルです reader.onload = ()=>{
      document.body.innerHTML += reader.result // reader.result は結果です}
  }、 間違い）
  </スクリプト>

画像ファイルの読み取り

<スクリプト>
  const input = document.querySelector('input[type=file]')
  input.addEventListener('change', ()=>{
    console.log( 入力ファイル )
    const リーダー = 新しい FileReader()
    reader.readAsDataURL(input.files[0]) // input.files[0]は最初のファイルです reader.onload = ()=>{
      const img = 新しい画像()
      img.src = リーダー結果
      document.body.appendChild(img) // reader.result は取得結果です}
  }、 間違い）
  </スクリプト>

例

java.io.* をインポートします。
パブリッククラスFileRead {
    パブリック静的void main(String args[])はIOExceptionをスローします{
        ファイル file = new File("Hello1.txt");
        // ファイルを作成します。file.createNewFile();
        // FileWriter オブジェクトを作成します
        FileWriter ライター = new FileWriter(ファイル);
        // ファイルにコンテンツを書き込みます writer.write("これは\n\n例です\n");
        ライターをフラッシュします。
        ライター.close();
        // FileReader オブジェクトを作成します。FileReader fr = new FileReader(file);
        char[] a = 新しいchar[50];
        fr.read(a); // 配列の内容を読み取ります for (char c : a)
            System.out.print(c); // 文字を1つずつ印刷します fr.close();
    }
}

方法

メソッドの定義	説明する
中止():void	ファイルの読み取り操作を終了します
readAsArrayBuffer(ファイル):void	ファイルの内容をバイトごとに非同期で読み取り、その結果はArrayBufferオブジェクトで表されます。
readAsBinaryString(ファイル):void	ファイルの内容をバイト単位で非同期に読み取り、結果はファイルのバイナリ文字列になります。
readAsDataURL(ファイル):void	ファイルの内容を非同期に読み取り、結果はdata:url形式の文字列で表されます。
readAsText(ファイル、エンコーディング):void	ファイルの内容を文字ごとに非同期で読み取り、結果を文字列として表現します。

イベント

イベント名	説明する
中止	読み取り操作が中止されたときに呼び出されます
エラー	読み取り操作でエラーが発生したときに呼び出されます
アップロード	読み取り操作が正常に完了したときに呼び出されます
ロード終了	読み取り操作が成功したか失敗したかに関係なく完了したときに呼び出されます。
ロード開始時	読み取り操作が開始される前に呼び出されます
進行中	データの読み取り中に定期的に呼び出されます