---
title: FileReader
slug: Web/API/FileReader
tags:
  - API
  - DOM
  - File API
  - FileReader
  - Files
  - Interface
  - Reference
  - インターフェイス
translation_of: Web/API/FileReader
---
<div>{{APIRef("File API")}}</div>

<p><strong><code>FileReader</code></strong> オブジェクトを使用すると、Web アプリケーションは、ユーザーのコンピュータに保存されているファイル (または生データ バッファ) の内容を非同期に読み取ることができます。{{domxref("File")}} または {{domxref("Blob")}} オブジェクトを使用して、読み込むファイルまたはデータを指定します。</p>

<p>File オブジェクトは、{{HTMLElement("input")}} 要素を使用してファイルを選択した結果として返される {{domxref("FileList")}} オブジェクト、ドラッグ＆ドロップ操作の {{domxref("DataTransfer")}} オブジェクト、または {{domxref("HTMLCanvasElement")}} 上の <code>mozGetAsFile()</code> API から取得することができます。</p>

<div class="blockIndicator warning">
<p>重要事項: <code>FileReader</code> は、ユーザーの (リモートの) システムから安全な方法でのみファイルの内容を読み取るために使用されます。単にファイルシステムからパス名でファイルを読み込むためには使用できません。JavaScript でパス名でファイルを読み込むには、標準的な Ajax ソリューションを使用してサーバーサイドのファイル読み込みを行い、クロスドメインでファイルを読み込む場合は CORS パーミッションを使用しなければなりません。</p>
</div>

<p>{{AvailableInWorkers}}</p>

<h2 id="Constructor" name="Constructor">コンストラクター</h2>

<dl>
 <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
 <dd>新しく作成された <code>FileReader</code> を返します。</dd>
</dl>

<p>詳細や例については <a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a> を参照してください。</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<dl>
 <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
 <dd>ファイルの読み込み中に発生したエラーを表す {{domxref("DOMException")}}。</dd>
 <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
 <dd><code>FileReader</code> の状態を示す数値。以下のいずれかになります。
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>EMPTY</code></td>
    <td><code>0</code></td>
    <td>まだデータは読み込まれていません。</td>
   </tr>
   <tr>
    <td><code>LOADING</code></td>
    <td><code>1</code></td>
    <td>データは現在読み込み中です。</td>
   </tr>
   <tr>
    <td><code>DONE</code></td>
    <td><code>2</code></td>
    <td>読込リクエストがすべて終了しました。</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
 <dd>ファイルの内容。このプロパティは読み込み操作が完了した後にのみ有効であり、データのフォーマットは、どのメソッドが読み込み操作を開始するのに使用されたかに依存します。</dd>
</dl>

<h3 id="Event_handlers" name="Event_handlers">イベントハンドラ</h3>

<dl>
 <dt>{{domxref("FileReader.onabort")}}</dt>
 <dd>{{event("abort")}} イベントのハンドラです。このイベントは、読み込み操作が中止されるたびにトリガされます。</dd>
 <dt>{{domxref("FileReader.onerror")}}</dt>
 <dd>{{event("error")}} イベントのハンドラです。このイベントは、読み込み操作がエラーになるたびにトリガされます。</dd>
 <dt>{{domxref("FileReader.onload")}}</dt>
 <dd>{{event("load")}} イベントのハンドラです。このイベントは、読み込み操作が正常に完了するたびにトリガされます。</dd>
 <dt>{{domxref("FileReader.onloadstart")}}</dt>
 <dd>{{event("loadstart")}} イベントのハンドラです。このイベントは、読み込みが開始されるたびにトリガされます。</dd>
 <dt>{{domxref("FileReader.onloadend")}}</dt>
 <dd>{{event("loadend")}} イベントのハンドラです。このイベントは、 (成功または失敗のいずれかで) 読み込み操作が完了するたびにトリガされます。</dd>
 <dt>{{domxref("FileReader.onprogress")}}</dt>
 <dd>{{event("progress")}} イベントのハンドラです。このイベントは、{{domxref("Blob")}} コンテンツの読み込み中に発生します。</dd>
</dl>

<div class="note">
<p><code>FileReader</code> は {{domxref("EventTarget")}} を継承しているので、{{domxref("EventTarget.addEventListener()", "addEventListener")}} メソッドを使用することで、これらのイベントをすべて待ち受けることもできます。</p>
</div>

<h2 id="Methods" name="Methods">メソッド</h2>

<dl>
 <dt>{{domxref("FileReader.abort()")}}</dt>
 <dd>読込処理を中断します。結果として <code>readyState</code> は <code>DONE</code> に変わります。</dd>
 <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
 <dd>指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると、<code>result</code> 属性にファイルのデータを表す {{domxref("ArrayBuffer")}} が格納されます。</dd>
 <dt>{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}</dt>
 <dd>指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると、<code>result</code> 属性にはファイルからの生のバイナリデータが文字列として格納されます。</dd>
 <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
 <dd>指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると、<code>result</code> 属性にはファイルのデータを表す <code>data:</code> の URL が格納されます。</dd>
 <dt>{{domxref("FileReader.readAsText()")}}</dt>
 <dd>指定された {{domxref("Blob")}} の内容の読み込みを開始し、終了すると <code>result</code> 属性にファイルの内容がテキスト文字列として格納されます。オプションでエンコーディング名を指定することができます。</dd>
</dl>

<h2 id="Events" name="Events">イベント</h2>

<p>{{domxref("EventTarget/addEventListener", "addEventListener()")}} を使用するか、このインターフェイスの <code>on<em>イベント名</em></code> プロパティにイベントリスナーを代入するかして、これらのイベントを待ち受けます。</p>

<dl>
 <dt>{{domxref("FileReader/abort_event", "abort")}}</dt>
 <dd>プログラムが {{domxref("FileReader.abort()")}} を呼び出したなどの原因で、読み取り操作が中断されたときに発生します。<br>
 {{domxref("FileReader/onabort", "onabort")}} プロパティ経由でも利用できます。</dd>
 <dt>{{domxref("FileReader/error_event", "error")}}</dt>
 <dd>エラーのために読み取りが失敗したときに発生します。<br>
 {{domxref("FileReader/onerror", "onerror")}} プロパティ経由でも利用できます。</dd>
 <dt>{{domxref("FileReader/load_event", "load")}}</dt>
 <dd>読み取りが正常に完了したときに発生します。<br>
 {{domxref("FileReader/onload", "onload")}} プロパティ経由でも利用できます。</dd>
 <dt>{{domxref("FileReader/loadend_event", "loadend")}}</dt>
 <dd>正常かどうかにかかわらず、読み取りが完了したときに発生します。<br>
 {{domxref("FileReader/onloadend", "onloadend")}} プロパティ経由でも利用できます。</dd>
 <dt>{{domxref("FileReader/loadstart_event", "loadstart")}}</dt>
 <dd>読み取りが開始されたときに発生します。<br>
 {{domxref("FileReader/onloadstart", "onloadstart")}} プロパティ経由でも利用できます。</dd>
 <dt>{{domxref("FileReader/progress_event", "progress")}}</dt>
 <dd>データの読み取り時に定期的に発生します。<br>
 {{domxref("FileReader/onprogress", "onprogress")}} プロパティ経由でも利用できます。</dd>
</dl>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td>
   <td>{{Spec2("File API")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの対応</h2>

<p>{{Compat("api.FileReader")}}</p>

<h2 id="See_also" name="See_also">あわせて参照</h2>

<ul>
 <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a></li>
 <li>{{domxref("File")}}</li>
 <li>{{domxref("Blob")}}</li>
</ul>