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

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ファイルの内容を文字ごとに非同期で読み取り、結果を文字列として表現します。

イベント

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

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptはファイルリーダーインターフェースを通じてファイルを読み取ります
  • JS+HTML5 FileReader オブジェクトの使用例
  • JS+HTML5 FileReader はファイルアップロード前のローカルプレビュー機能を実装します

<<:  CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

>>:  MySQL のクエリパフォーマンスに対する制限の影響

推薦する

MySQLを使用して列内の異なる値の数をカウントする例

序文この記事で実装されている要件は、実際には非常に一般的です。たとえば、ユーザーが登録したチャネルを...

MySQL ツリー構造データベース テーブル設計

目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...

docker-compose が遅すぎる場合の解決策の詳細な説明

解決策はただ一つ、ソースを変更することです。 github からのソースは基本的にタイムアウトするの...

Linuxのバージョン情報を復号化する方法

Linux バージョンに関する情報を表示および解釈するのは、見た目よりも少し複雑です。単純なバージョ...

JavaScript でモバイル モーダル ボックスの効果を実現

この記事では、モバイルモーダルボックス効果を実現するためのJavaScriptの具体的なコードを参考...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

Linux カーネルの探究: Kconfig の秘密

Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...

HTML のメタタグの簡単な比較

メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページ ファイ...

CSS3 FlexBox の伸縮自在なレイアウトを 10 分で理解する

基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

ウェブページ制作をマスターするために必要な6つのスキルのまとめ

ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

DockerのIDEA構成プロセス

IDEA は Java で最も一般的に使用されている開発ツールであり、Docker は最も人気のある...

nginx+php-fpm サービスの HTTP ステータス コード 502 の詳細な分析

弊社の Web プロジェクトの 1 つでは、新しい都市の増加によりトラフィックと DB 負荷が増加し...