JSでファイルを読み取る方法

JavaScript でブラウザ上でファイルを読み取る方法がわかりません。この記事で詳しく説明しますので、皆さんのお役に立てれば幸いです。

JavaScript の Web API には File API という新しいメソッドがあるため、バックエンド サーバーを使用せずにブラウザ上でファイルを読み取ったりデータを処理したりすることがより便利になりました。

FileReader は、ファイルからデータを読み取り、それを JavaScript 変数に保存します。これは、XMLHttpRequest と同じ意味を持ち、読み取り操作は非同期です。詰まった。読み取り操作には、次のようなさまざまなメソッドがあります。

(1) readAsText() – ファイルの内容をプレーン テキストの形式で返します。 readAsText() メソッドを使用してテキスト ファイルを読み取ることができます。このメソッドには 2 つのパラメータがあります。最初のパラメータは、読み取られる File または BLOB オブジェクトです。 2 番目のパラメータは、ファイルのエンコーディングを指定するために使用されます。 2 番目のパラメータはオプションです。指定しない場合、デフォルトのエンコーディングとして UTF-8 が使用されます。設定では、ファイルのロード後にイベントリスナーを設定する必要があります。 onload イベントが呼び出されると、結果属性 FileReader によって取得されたファイルの内容を確認できます。

<input type="file" id="file" />
	<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var text=reader.result;
}
reader.readAsText(file);
</script>

(2) readAsArrayBuffer() メソッド

このメソッドは、Blob または File オブジェクトを読み取り、 ArrayBuffer を生成します。読み取り操作が完了すると、readyState が Done (completed) に変更され、loadend イベントがトリガーされます。同時に、result 属性には、読み取りファイルのデータが固定長のバイナリであることを表す ArrayBuffer オブジェクトが含まれます。データバッファ。 JPEG 画像を PNG

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var readAsArrayBuffer=reader.result;
}
reader.readAsArrayBuffer(file);
</script>

に変換するなど、ファイルを操作する場合 (3) readAsDataURL() はファイルの内容をデータ URL

# の形式で返します。

##このメソッドは、ファイルまたは BLOB を受け入れてデータ URL を生成します。データ URL は、基本的にファイル データの Base64 エンコード文字列です。このデータ URL は、src 画像属性などの設定に使用できます。 ##上記の 3 つのメソッドは、読み取りを開始する前にロード イベントをリッスンする必要があり、event.target.result は読み取りの結果を返します。

要約: 以上がこの記事の内容です。皆さんの学習に役立つことを願っています。

以上がJSでファイルを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。