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を使用するプロセスの詳細な説明

推薦する

面接で聞かれる可能性のあるCSSに関する質問

この記事は、100 回書かれ、質問された CSS の質問を記念するためのものです。聞く: CSS セ...

moment.jsの時間と日付の処理の詳細な説明

月曜日から日曜日の時間形式の変換(Y --- 年 M --- 月 D--- 日) : : : : :...

CSS セレクタのグループ化の簡単な分析

セレクタのグループ化h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のス...

ローカルの Windows リモート デスクトップから Alibaba Cloud Ubuntu 16.04 サーバーに接続する方法

ローカル Windows リモート デスクトップが Alibaba Cloud Ubuntu 16....

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

Navicat for SQLite で中国語データを CSV にインポートする方法

この記事では、参考までに、csv中国語データをNavicat for SQLiteにインポートする具...

JavaScript の一般的なステートメント ループ、判定、文字列から数値

目次1. スイッチ2. whileループ3. Do/Whileループ3. 文字列を数値に変換する1....

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...

ウェブサイトの速度を上げる6つの方法

1. .js ライブラリ ファイルのアドレスを Google CDN アドレスに置き換えます。 (G...

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...

アルバムと写真をアルバムに保存するためのWeChatアプレット

私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作...

Mysql マスタースレーブレプリケーションの注意事項の説明

1. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...

Linux Zabbixカスタム監視およびアラーム実装プロセスの分析

ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...

JavaScript 履歴オブジェクトの説明

目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...