Agile育成ブログ
未来を変える喜びを
未分類

FileReader


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

選択したファイルの内容を取得する

フォームでファイルをアップロード/送信するとき、input要素の「type=”file”」による「ファイル選択」を使用します。
このとき、選択したファイルの内容(データ)はFileReaderオブジェクトから取得することができます。

FileReaderオブジェクト

FileReaderオブジェクトには形式別に、ファイル内容を取得するメソッドが次の4つ用意されています。

  • readAsTextメソッド – ファイル内容をテキスト形式で取得
  • readAsDataURLメソッド – ファイル内容をBase64形式にエンコードし、「data:〜」で始まるURL形式で取得
  • readAsArrayBufferメソッド – ファイル内容をArrayBufferオブジェクトとして取得
  • readAsBinaryStringメソッド – ファイル内容をバイナリデータとして取得

ファイル内容をテキスト形式で取得

まずはファイル内容をテキスト形式で取得する方法から解説していきます。

フォームの入力項目「type=”file”」からファイルを選択したときに、FileReaderオブジェクトreadAsTextメソッドを使ってファイルを読み込みます。
選択するファイルは、次のようなシンプルに2行のテキストが入ったファイル(.txtファイル)を用意します。

You cannot copy content of this page