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());

ランタイム