JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

JS はファイルを読み取る FileReader

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

書類

ファイルリーダー

イベントとメソッド

イベント処理

ファイルリーダー.onabort中止イベントを処理します。このイベントは、読み取り操作が中断されたときにトリガーされます。
ファイルリーダー.onerrorエラー イベントを処理します。このイベントは、読み取り操作中にエラーが発生したときにトリガーされます。
ファイルリーダー.onloadロード イベントを処理します。このイベントは、読み取り操作が完了したときに発生します。
ファイルリーダー.onloadstart loadstart イベントを処理します。このイベントは、読み取り操作が開始されたときに発生します。
FileReader.onloadendロード終了イベントを処理します。このイベントは、読み取り操作が完了したとき(成功または失敗)に発行されます。
ファイルリーダー.onprogressエラー イベントを処理します。このイベントは、読み取り操作中にエラーが発生したときにトリガーされます。

標準的な方法

  • FileReader.abort()

読み取り操作を中止します。返されると、readyState プロパティは DONE になります。

  • FileReader.readAsArrayBuffer()

指定された Blob の内容の読み取りを開始します。完了すると、結果プロパティには読み取られたファイルの ArrayBuffer データ オブジェクトが含まれます。

  • FileReader.readAsDataURL()

指定された Blob の内容の読み取りを開始します。完了すると、結果プロパティには、読み取られたファイルの内容を表す data: URL 形式の文字列が含まれます。

  • FileReader.readAsText()

指定された Blob の内容の読み取りを開始します。完了すると、結果プロパティには読み取られたファイルの内容を表す文字列が含まれます。

基本的な使い方

ファイルの準備: read.txt (コンピューター上の任意のファイルを読み取ることができます)

ファイルの読み取り

HTML構造

<input type="file" 複数>

JSコール

<スクリプト>
	window.onload = 関数(){
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change', 関数(){
			var リーダー = 新しい FileReader()
			// 非同期リクエストを送信します // 0. readAsText メソッドを使用します (結果を通常のテキストとして読み取ります)
			リーダー.readAsText(this.files[0]) 
			// 読み取り成功の結果: ファイルが正常に読み取られました (コンピューター上のファイル read.txt)
			reader.onload = 関数(){
    		// 読み取り後、データはオブジェクトの result プロパティに保存されます console.log(this.result)// 出力: ファイルは正常に読み取られました }
		})
	}
</スクリプト>

JS 呼び出しは他のメソッドを使用します (他のメソッドも同様に使用されます)

データとして読み込むURL

window.onload = 関数(){
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change', 関数(){
			var リーダー = 新しい FileReader()
			// readAsDataURL を使用します (base64 エンコードを取得するため)
			リーダー.readAsDataURL(this.files[0])
			reader.onload = 関数(){
    		コンソールログ(この結果)
    		//データ:text/plain;base64,5bey57uP5oiQ5Yqf6K+75Y+W5paH5Lu2
  			}
		})
	}

イベント処理

JS 呼び出し (上記の HTML とファイルをそのまま使用するか、より大きなファイルを用意すると、効果が向上します)

window.onload = 関数(){
		var inpFile = document.querySelector('input[type=file]')
		inpFile.addEventListener('change', 関数(){
			var リーダー = 新しい FileReader()
			リーダー.readAsText(this.files[0])
			var カウント = 0;
			reader.onloadstart = 関数(){
				console.log("onloadstart 状態"+this.readyState)
    			console.log("読み込みを開始します")
  			}
  			reader.onloadend = 関数(){
  				console.log("onloadend 状態"+this.readyState)
    			console.log("読み込みが完了しました")
  			}
  			reader.onprogress = 関数(){
  				カウント++;
  				console.log("onprogress 状態"+this.readyState)
    			console.log("読み込み中"+カウント)
  			}
			reader.onload = 関数(){
    			console.log("onload によって取得されたデータは "+this.result) です)
    			console.log("ステータス"+this.readyState)
  			}
  			reader.onerror = 関数(){
    			console.log('問題が発生しました')
  			}
  			reader.onerror = 関数(){
    			console.log('中止イベントを処理します。このイベントは、読み取り操作が中断されたときにトリガーされます。')
  			}
		})
	}

結果は以下のとおりです

イベント処理の結果

重要な結果分析:

  • 状態1(readyState): データがロード中
  • ステータス 2: すべての読み取り要求が完了しました。
  • もちろん、状態 0 (readyState) は、まだデータがロードされていないことを意味します。
  • 進行状況イベントは約 50 ミリ秒ごとにトリガーされます。つまり、複数回トリガーされる可能性があり、onload イベントは onloadend イベントの前にトリガーされます。
  • さまざまな理由でファイルを読み取ることができない場合、エラー イベントがトリガーされます。エラー イベントがトリガーされると、関連情報が FileReader オブジェクトの error プロパティに保存されます。このプロパティは、エラー コードである 1 つのプロパティ コードのみを持つオブジェクトを保存します。 1 はファイルが見つからないこと、2 はセキュリティ エラー、3 は読み取りが中断されたこと、4 はファイルが読み取り不能であること、5 はエンコード エラーを意味します。
  • 読み取りプロセスを中断したい場合は、abort メソッドを呼び出して、abort イベントをトリガーすることができます。返されると、readyState プロパティは DONE になります。通常、バックグラウンド操作に使用されます。

ノード操作ファイル (readfile)

上記を踏まえると、ブラウザの JavaScript にはファイルを操作する機能がありません (セキュリティ上、ローカルファイルを直接操作することはできません) が、Node の JavaScript にはファイルを操作する機能があることがわかります。

ノードはどうやってファイルを読み取りますか? (ノードをインストールするときはコードは無視できます)

  • まず、ノード環境をインストールする必要があります(非常に簡単です。オンラインに多くのチュートリアルがあります)。また、nodemonもインストールすることをお勧めします。
  • cmdを開いてgitを使用する
  • JSファイルを作成する
  • ノードのコアモジュールをロードする
  • readFileの使用
  • cmdにノードファイル名.jsを入力します。
// 1. require メソッドを使用して fs コアモジュールをロードします var fs = require('fs')
// 2. ファイルの読み取り // 最初のパラメータは読み取り対象のファイル パスです // 2 番目のパラメータはコールバック関数です // 成功 // データ データ // エラー null
// 失敗 // データが未定義、データなし // エラー エラー オブジェクト fs.readFile('read.txt', function (error, data) {
  // ここでエラーが発生したかどうかをチェックするには、エラーを判断します if (error) {
    console.log('ファイルの読み取りに失敗しました')
  } それ以外 {
    コンソールログ(data.toString())
  }
})

結果

ノードはファイルを読み取ります

ファイルの読み取りは非同期操作です

複数のファイルを読み取る場合、readfile を使用してファイルを読み取ると、必ずしも結果が順番に印刷されるわけではないため、これは非同期操作です。ファイルを順番に読み取る方法。

Promiseの使用

var fs = require('fs')
関数 pReadFile(ファイルパス) {
  新しいPromise(function(resolve,reject))を返す{
    fs.readFile(filePath, 'utf8', 関数(err, データ) {
      もし(エラー){
        拒否(エラー)
      } それ以外 {
        解決(データ)
      }
    })
  })
}
pReadFile('./data/a.txt')
  .then(関数 (データ) {
    コンソール.log(データ)
    pReadFile('./data/b.txt') を返します
  })
  .then(関数 (データ) {
    コンソール.log(データ)
    pReadFile('./data/c.txt') を返します
  })
  .then(関数 (データ) {
    コンソール.log(データ)
  })

ファイルの書き込み

fs.writeFile('read.txt', 'みなさんこんにちは。自己紹介させてください。私はファイルライターです。', function (error) {
  if (エラー) {
    console.log('書き込みに失敗しました')
  } それ以外 {
    console.log('書き込みに成功しました')
  }
})

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

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

<<:  CSS子要素選択親要素の実装

>>:  DockerでGPUを使用するプロセスの詳細な説明

推薦する

Vueはデジタル千単位区切り形式をグローバルに実装します

この記事の例では、Vue がデジタル 3 桁区切り形式をグローバルに実装するための具体的なコードを参...

MySQL の暗黙的な型変換によって発生するインデックス障害の解決策

目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...

MySQLにおける正規表現の一般的な使用法

MySQL における Regexp の一般的な使用法特定の文字列を含むあいまい一致# コンテンツフィ...

HTTP サーバーとクライアントのやり取りをシミュレートする Node.js+postman

目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...

HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...

ウェブデザインにおける階層化インターフェースの設計経験

多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...

MySQLスローログに関する知識のまとめ

目次1. スローログの紹介2. スローログの練習1. スローログの紹介スロー ログの正式名称はスロー...

インタビューの質問: ホーリー グレイル レイアウトとダブル ウィング レイアウトの違い

序文今日は、聖杯レイアウトとダブルウィングレイアウト、そしてそれらの違いについてお話しします。この2...

KVM ベースの SRIOV パススルー構成とパフォーマンス テストの詳細な説明

SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...

SQL で行の最大値または最小値を取得する方法

元データと対象データSQL文を実装する(最大) 選択 店、 月、 最大(dz,fz,sp) が最大値...

Centos7でポートを開く方法

CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...

正規表現に基づくあいまい文字列置換を実装するMySQLの方法の分析

この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...

MySQL 継続的集計の原理と使用法の分析

この記事では、例を使用して、MySQL の継続的な集計の原理と使用方法を説明します。ご参考までに、詳...

HTML テーブルタグチュートリアル (32): セルの水平方向の配置属性 ALIGN

水平方向では、セルの配置を左、中央、右に設定できます。基本的な構文<TD ALIGN=&quo...

macOS での MySQL 8.0.17 のインストールと簡単な設定チュートリアル

私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...