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ファイル)を用意します。