jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

FileReaderはローカルファイルまたはBLOBを読み取ります

FileReader オブジェクトは、ユーザーのコンピューターに保存されているファイルの内容を非同期で読み取る機能を提供します。読み取るファイルまたはデータを指定するには、File オブジェクトまたは Blob オブジェクトを使用します。FileReader インターフェイスは、ファイルを読み取るためのメソッドと、読み取り結果を含むイベント モデルを提供します。

1. FileReaderの使用

注: 古いブラウザとの互換性を確保する必要がある場合は、FileReader オブジェクトが存在するかどうかを確認する必要があります。

if (window.FileReader) {
 リーダーを新しいFileReader()にします。
} それ以外 {
 console.log('お使いのブラウザはファイルの読み取りをサポートしていません');
}

2. FileReader メソッド

方法効果パラメータ戻り値
アボート()読み取り操作を中止するなしなし
配列バッファとして読み込む()ファイルとBlobのコンテンツを読み取るファイル/ブロブ結果プロパティはArrayBufferデータオブジェクトのファイルの内容を返します。
readAsBinaryString()[W3 で非推奨]ファイルとBlobのコンテンツを読み取るファイル/ブロブ結果プロパティは元のバイナリデータのファイル内容を返します。
データURLとして読み込み()ファイルとBlobのコンテンツを読み取るファイル/ブロブ

結果属性は、データ:URLのBase64文字列形式でファイルの内容を返します。

テキストとして読み込む()ファイルとBlobのコンテンツを読み取るファイル/ブロブ結果プロパティはファイルの内容を文字列として返します

3. FileReaderプロパティ

  • FileReader.error (読み取り専用): ファイルの読み取り中に発生したエラーを示す例外
  • FileReader.readyState (読み取り専用): FileReader の状態を表す数値
価値ステータス名説明する
0空のデータが読み込まれていません
1読み込み中データの読み込み
2終わり

データの読み込みが完了しました

  • FileReader.result (読み取り専用): ファイルの内容が読み取られます。このプロパティは、データが読み取られた後にのみ有効です。ファイルの内容の形式は、読み取り方法によって決まります。

4. FileReader イベント

  • FileReader.onabort : 読み取りが中止されたときにこのイベントがトリガーされます。
  • FileReader.onerror : 読み取り中にエラーが発生したときにこのイベントがトリガーされます。
  • FileReader.onload : 読み取りが完了するとこのイベントがトリガーされます。
  • FileReader.onloadstart : このイベントは、読み取り操作が開始されたときにトリガーされます。
  • FileReader.onloadend : このイベントは、読み取りが完了したときにトリガーされます (失敗した場合と成功した場合の両方でトリガーされます)。
  • FileReader.onprogress : このイベントは読み取り中にトリガーされます。

知らせ:

1. セキュリティ上の理由により、FileReader は入力によって渡されたファイルまたは Ajax 読み取りサーバーによって返されたファイルを読み取りますが、指定されたパスにあるファイルを読み取ることはできません。

2. FileReader は webworker で使用できます。

<!DOCTYPE html>
<html class="no-js">
	<ヘッド>
		<メタ文字セット="utf-8" />
		<meta http-equiv="X-UA-compatible" content="IE=edge" />
		<タイトル></タイトル>
		<meta name="説明" コンテンツ="" />
		<meta name="viewport" content="width=デバイス幅、初期スケール=1" />
		<link rel="スタイルシート" href="" />
	</head>
 
	<本文>
		<input type="file" id="myFile" />
		<script type="text/javascript">
			if (window.FileReader) {
				var リーダー = 新しい FileReader();
			} それ以外 {
				console.log('お使いのブラウザはファイルの読み取りをサポートしていません');
			}
			var myFile = document.querySelector('#myFile');
			myFile.onchange = 関数 () {
				var ファイル = myFile.files[0];
				reader.readAsDataURL(ファイル);
				reader.onload = 関数(){
					var data = reader.result; //base64 形式のファイル コンテンツ };
                reader.onerror = 関数(){
                    console.log('読み取りに失敗しました');
                    コンソールログ(リーダー.エラー);
                }
			};
		</スクリプト>
	</本文>
</html>

FileReader を使用してローカル ディスクのファイルを読み取る際の問題

js ファイルを実行します (js ファイルをプロジェクトの src の下に配置します)

(1) java.net.URL url = TestScriptEngine.class.getClassLoader().getResource("a.js");
(2)//System.out.println(url.getPath().substring(1).replace("%20", " "));
(3)FileReader fileReader = new FileReader(url.getPath());

ランタイム

表示: スレッド「main」で例外が発生しました java.io.FileNotFoundException: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js (指定されたパスが見つかりません)

url.getPath() をローカルファイルディレクトリの「D:/Eclipse WorkSpace/(java300)ScriptManager/bin/a.js」に変更すると、ファイルを正常に読み取ることができます。

url.getPath() の値は次のとおりです: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js ただし、読み込みファイルが見つかりません

問題は「%20」です。Eclipse WorkSpace の間にスペースがあり、システムが自動的にそれを %20 に置き換えてしまい、操作中にエラーが発生します。

url.getPath() で処理を行い、url.getPath().substring(1).replace("%20", " ") で %20 を " " スペースに置き換えると、問題は解決します。

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

以下もご興味があるかもしれません:
  • js でファイル コントロールの完全なパスを取得するにはどうすればよいでしょうか?
  • JavaScript と fileReader を組み合わせて画像をアップロードする
  • Javascript ファイルと Blob の詳細な説明
  • js 画像アップロードにおけるファイル、bolb、base64 画像間の変換

<<:  CSS 画面サイズ適応実装例

>>:  Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

推薦する

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...

シングルサインオン制御を実装するためのVueの完全なコード

参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...

9999px に別れを告げる新しい CSS 画像置換テクニック (背景表示と画面外へのテキストの移動)

-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換え...

VMware での Ubuntu Docker のインストール (コンテナ構築)

1. マインドマップ 2. コンテナの構築方法2.1 実験環境の準備(1)環境選択管理ツール: D...

MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策

lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...

docker の run/cmd/entrypoint の違いの詳細な説明

Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...

20個のJavaScriptワンラインコードを共有する

目次1. ブラウザのクッキーの値を取得する2. RGBを16進数に変換する3. クリップボードにコピ...

ツールキット: Bootstrap よりも強力なフロントエンド フレームワーク

注: 現在、最も人気のフロントエンド フレームワークは Bootstrap と Foundation...

単一/複数行テキストを含む div を垂直方向に中央揃えする N 通りの方法 (高さ不明/高さ固定)

この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...

Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)

1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

Vue3でelement-plusを使用する方法の詳細な説明

目次1. インストール2. main.jsにインポートする3. 使用Vue3がリリースされてからしば...

LinuxでSVNサーバーを構築する方法

1: SVNをインストールする yum インストール -y サブバージョン2. 倉庫を作る1: 倉庫...

JSX を使用してマークアップ コンポーネント スタイルの開発を作成する例 (フロントエンドのコンポーネント化)

目次JSX環境の構築NPMを初期化するwebpackをインストールするBabelをインストールするw...

HTML ページジャンプのパラメータ渡しの問題

効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...