initial commit

19 files changed, 1900 insertions, 0 deletions

diff --git a/files/ja/web/api/filereader/abort/index.html b/files/ja/web/api/filereader/abort/index.html
new file mode 100644
index 0000000000..22e6d04195
--- /dev/null
+++ b/files/ja/web/api/filereader/abort/index.html
@@ -0,0 +1,59 @@
+---
+title: FileReader.abort()
+slug: Web/API/FileReader/abort
+tags:
+  - API
+  - File API
+  - FileReader
+  - Files
+  - Method
+  - Reference
+  - abort
+  - メソッド
+translation_of: Web/API/FileReader/abort
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>abort</code></strong> メソッドは読み取り操作を中止します。戻る時に、 {{domxref("FileReader.readyState","readyState")}} が <code>DONE</code> になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>instanceOfFileReader</var>.abort();</pre>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt><code>DOM_FILE_ABORT_ERR</code></dt>
+ <dd>読み込み操作が実行されていない間に <code>abort</code> が呼び出されたとき (つまり、状態が <code>LOADING</code> でないとき) にスローされます。</dd>
+</dl>
+
+<h2 id="仕様">仕様</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", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.abort")}}</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/abort_event/index.html b/files/ja/web/api/filereader/abort_event/index.html
new file mode 100644
index 0000000000..a9613ad6d9
--- /dev/null
+++ b/files/ja/web/api/filereader/abort_event/index.html
@@ -0,0 +1,175 @@
+---
+title: 'FileReader: abort イベント'
+slug: Web/API/FileReader/abort_event
+tags:
+  - API
+  - Event
+  - FileReader
+  - ProgressEvent
+  - Reference
+  - Web
+  - abort
+  - イベント
+translation_of: Web/API/FileReader/abort_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>abort</code> イベントは、読み込みが中断されたときに発生します。つまり、プログラムが {{domxref("FileReader.abort()")}} を呼び出したためです。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("FileReader.onabort")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+
+    &lt;div class="file-select"&gt;
+        &lt;label for="avatar"&gt;Choose a profile picture:&lt;/label&gt;
+        &lt;input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg"&gt;
+    &lt;/div&gt;
+
+    &lt;img src="" class="preview" height="200" alt="Image preview..."&gt;
+
+    &lt;div class="event-log"&gt;
+        &lt;label&gt;Event log:&lt;/label&gt;
+        &lt;textarea readonly class="event-log-contents"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.preview {
+  margin: 1rem 0;
+}
+
+.event-log-contents {
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.example {
+  display: grid;
+  grid-template-areas:
+              "select  log"
+              "preview log";
+}
+
+.file-select {
+  grid-area: select;
+}
+
+.preview {
+  grid-area: preview;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log&gt;label {
+  display: block;
+}
+
+.event-log-contents {
+  resize: none;
+}</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+    reader.abort();
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-abort-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.abort_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>Related events: {{domxref("FileReader.loadstart_event", "loadstart")}}, {{domxref("FileReader.loadend_event", "loadend")}}, {{domxref("FileReader.progress_event", "progress")}}, {{domxref("FileReader.error_event", "error")}}, {{domxref("FileReader.load_event", "load")}}.</li>
+</ul>
diff --git a/files/ja/web/api/filereader/error/index.html b/files/ja/web/api/filereader/error/index.html
new file mode 100644
index 0000000000..3449d35eb7
--- /dev/null
+++ b/files/ja/web/api/filereader/error/index.html
@@ -0,0 +1,54 @@
+---
+title: FileReader.error
+slug: Web/API/FileReader/error
+tags:
+  - API
+  - File API
+  - Reference
+  - ファイル
+  - プロパティ
+translation_of: Web/API/FileReader/error
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>{{domxref("FileReader")}} の <code><strong>error</strong></code> プロパティは、ファイルの読み取り中に発生したエラーを返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>error</var> = <var>instanceOfFileReader</var>.error
+</pre>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{domxref("DOMError")}} に関連するエラーが含まれています。 Chrome 48+/Firefox 58+ では、 <code>DOMError</code> が DOM 標準から削除されているため、このプロパティは {{domxref("DOMException")}} を返します。</p>
+
+<h2 id="仕様">仕様</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", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.error")}}</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/error_event/index.html b/files/ja/web/api/filereader/error_event/index.html
new file mode 100644
index 0000000000..e7f7933599
--- /dev/null
+++ b/files/ja/web/api/filereader/error_event/index.html
@@ -0,0 +1,92 @@
+---
+title: 'FileReader: error イベント'
+slug: Web/API/FileReader/error_event
+tags:
+  - API
+  - Error
+  - Event
+  - FileReader
+  - ProgressEvent
+  - Reference
+  - Web
+  - onerror
+  - イベント
+translation_of: Web/API/FileReader/error_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>error</code> イベントは、エラーによって読み取りが失敗したとき (例えば、ファイルが見つからなかった場合や読み取り可能ではなかった場合) に発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("FileReader.onerror")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const reader = new FileReader();
+
+function handleSelected(e) {
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+
+        reader.addEventListener('error', () =&gt; {
+            console.error(`Error occurred reading file: ${selectedFile.name}`);
+        });
+
+        reader.addEventListener('load', () =&gt; {
+            console.error(`File: ${selectedFile.name} read successfully`);
+        });
+
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-error-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.error_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: {{domxref("FileReader.loadstart_event", "loadstart")}}, {{domxref("FileReader.loadend_event", "loadend")}}, {{domxref("FileReader.progress_event", "progress")}}, {{domxref("FileReader.load_event", "load")}}, {{domxref("FileReader.abort_event", "abort")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/filereader/index.html b/files/ja/web/api/filereader/filereader/index.html
new file mode 100644
index 0000000000..1579979068
--- /dev/null
+++ b/files/ja/web/api/filereader/filereader/index.html
@@ -0,0 +1,59 @@
+---
+title: FileReader()
+slug: Web/API/FileReader/FileReader
+tags:
+  - API
+  - Constructor
+  - FileReader
+  - Reference
+translation_of: Web/API/FileReader/FileReader
+---
+<p><strong><code>FileReader()</code></strong> コンストラクタは、新しい FileReader を作成します。</p>
+
+<p><code>FileReader</code> の使用方法の詳細については、<a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a> を参照してください。</p>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="brush: js notranslate">var reader = new FileReader();</pre>
+
+<h3 id="パラメータ">パラメータ</h3>
+
+<p>なし</p>
+
+<h2 id="例">例</h2>
+
+<p>次のコードスニペットは、<code>FileReader()</code> コンストラクタを使用した <code><a href="/ja/docs/Web/API/FileReader">FileReader</a></code> オブジェクトの作成と、その後のオブジェクトの使用法を示しています。</p>
+
+<pre class="brush: js notranslate">function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+</pre>
+
+<h2 id="仕様">仕様</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')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからのファイルの使用</a></li>
+</ul>
diff --git a/files/ja/web/api/filereader/index.html b/files/ja/web/api/filereader/index.html
new file mode 100644
index 0000000000..8d8d799866
--- /dev/null
+++ b/files/ja/web/api/filereader/index.html
@@ -0,0 +1,159 @@
+---
+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>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<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>
diff --git a/files/ja/web/api/filereader/load_event/index.html b/files/ja/web/api/filereader/load_event/index.html
new file mode 100644
index 0000000000..2cbb63289a
--- /dev/null
+++ b/files/ja/web/api/filereader/load_event/index.html
@@ -0,0 +1,171 @@
+---
+title: 'FileReader: load イベント'
+slug: Web/API/FileReader/load_event
+tags:
+  - API
+  - Event
+  - FileReader
+  - Web
+  - load
+translation_of: Web/API/FileReader/load_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>load</code> イベントは、ファイルが正常に読み込めたときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("FileReader.onload")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+
+    &lt;div class="file-select"&gt;
+        &lt;label for="avatar"&gt;Choose a profile picture:&lt;/label&gt;
+        &lt;input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg"&gt;
+    &lt;/div&gt;
+
+    &lt;img src="" class="preview" height="200" alt="Image preview..."&gt;
+
+    &lt;div class="event-log"&gt;
+        &lt;label&gt;Event log:&lt;/label&gt;
+        &lt;textarea readonly class="event-log-contents"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.preview {
+  margin: 1rem 0;
+}
+
+.event-log-contents {
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.example {
+  display: grid;
+  grid-template-areas:
+              "select  log"
+              "preview log";
+}
+
+.file-select {
+  grid-area: select;
+}
+
+.preview {
+  grid-area: preview;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log&gt;label {
+  display: block;
+}
+
+.event-log-contents {
+  resize: none;
+}</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-load-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.load_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: {{domxref("FileReader.loadstart_event")}}, {{domxref("FileReader.loadend_event")}}, {{domxref("FileReader.progress_event")}}, {{domxref("FileReader.error_event")}}, {{domxref("FileReader.abort_event")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/loadend_event/index.html b/files/ja/web/api/filereader/loadend_event/index.html
new file mode 100644
index 0000000000..68cfad88f5
--- /dev/null
+++ b/files/ja/web/api/filereader/loadend_event/index.html
@@ -0,0 +1,173 @@
+---
+title: 'FileReader: loadend イベント'
+slug: Web/API/FileReader/loadend_event
+tags:
+  - API
+  - Event
+  - FileReader
+  - ProgressiveEvent
+  - Web
+  - loadend
+  - イベント
+translation_of: Web/API/FileReader/loadend_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>loadend</code> イベントは、ファイル読み込みが、成功したかどうかにかかわらず完了したときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("FileReader.onloadend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+
+    &lt;div class="file-select"&gt;
+        &lt;label for="avatar"&gt;Choose a profile picture:&lt;/label&gt;
+        &lt;input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg"&gt;
+    &lt;/div&gt;
+
+    &lt;img src="" class="preview" height="200" alt="Image preview..."&gt;
+
+    &lt;div class="event-log"&gt;
+        &lt;label&gt;Event log:&lt;/label&gt;
+        &lt;textarea readonly class="event-log-contents"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.preview {
+  margin: 1rem 0;
+}
+
+.event-log-contents {
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.example {
+  display: grid;
+  grid-template-areas:
+              "select  log"
+              "preview log";
+}
+
+.file-select {
+  grid-area: select;
+}
+
+.preview {
+  grid-area: preview;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log&gt;label {
+  display: block;
+}
+
+.event-log-contents {
+  resize: none;
+}</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-loadend-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.loadend_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: {{domxref("FileReader.load_event", "load")}}, {{domxref("FileReader.loadend_event", "loadend")}}, {{domxref("FileReader.progress_event", "progress")}}, {{domxref("FileReader.error_event", "error")}}, {{domxref("FileReader.abort_event", "abort")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/loadstart_event/index.html b/files/ja/web/api/filereader/loadstart_event/index.html
new file mode 100644
index 0000000000..8704e42c03
--- /dev/null
+++ b/files/ja/web/api/filereader/loadstart_event/index.html
@@ -0,0 +1,173 @@
+---
+title: 'FileReader: loadstart イベント'
+slug: Web/API/FileReader/loadstart_event
+tags:
+  - API
+  - Event
+  - FileReader
+  - ProgressEvent
+  - Web
+  - loadstart
+  - イベント
+translation_of: Web/API/FileReader/loadstart_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>loadstart</code> イベントは、ファイル読み込み操作が始まったときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("FileReader.onloadstart")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+
+    &lt;div class="file-select"&gt;
+        &lt;label for="avatar"&gt;Choose a profile picture:&lt;/label&gt;
+        &lt;input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg"&gt;
+    &lt;/div&gt;
+
+    &lt;img src="" class="preview" height="200" alt="Image preview..."&gt;
+
+    &lt;div class="event-log"&gt;
+        &lt;label&gt;Event log:&lt;/label&gt;
+        &lt;textarea readonly class="event-log-contents"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.preview {
+  margin: 1rem 0;
+}
+
+.event-log-contents {
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.example {
+  display: grid;
+  grid-template-areas:
+              "select  log"
+              "preview log";
+}
+
+.file-select {
+  grid-area: select;
+}
+
+.preview {
+  grid-area: preview;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log&gt;label {
+  display: block;
+}
+
+.event-log-contents {
+  resize: none;
+}</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-loadstart-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.loadstart_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: {{domxref("FileReader.load_event")}}, {{domxref("FileReader.loadend_event")}}, {{domxref("FileReader.progress_event")}}, {{domxref("FileReader.error_event")}}, {{domxref("FileReader.abort_event")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/onabort/index.html b/files/ja/web/api/filereader/onabort/index.html
new file mode 100644
index 0000000000..7c2c2d0d0a
--- /dev/null
+++ b/files/ja/web/api/filereader/onabort/index.html
@@ -0,0 +1,16 @@
+---
+title: FileReader.onabort
+slug: Web/API/FileReader/onabort
+tags:
+  - Event Handler
+  - File
+  - FileReader
+  - Property
+  - Reference
+translation_of: Web/API/FileReader/onabort
+---
+<p><strong><code>FileReader.onabort</code></strong> プロパティには、<code><a href="/en-US/docs/Web/Events/abort">abort</a></code> イベントが発生したとき、つまりファイルの読み取り処理が中止されたときに実行されるイベント ハンドラが含まれています。</p>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="brush: js notranslate">reader.onabort = function() { ... };</pre>
diff --git a/files/ja/web/api/filereader/onerror/index.html b/files/ja/web/api/filereader/onerror/index.html
new file mode 100644
index 0000000000..27b1cafbfa
--- /dev/null
+++ b/files/ja/web/api/filereader/onerror/index.html
@@ -0,0 +1,18 @@
+---
+title: onerror
+slug: Web/API/FileReader/onerror
+translation_of: Web/API/FileReader/onerror
+---
+<p><a href="/en-US/docs/Web/API/FileReader">FileReader</a> の onerror ハンドラは、Error オブジェクトではなく Event オブジェクトをパラメータとして受け取りますが、エラーは FileReader オブジェクトから <code><a href="/en-US/docs/Web/API/FileReader/error">instanceOfFileReader.error</a></code> のようにアクセスすることができます。</p>
+
+<pre class="brush:js; line-numbers  language-js notranslate"><code class="language-js"><span class="comment token">// </span></code>&lt;input type="file" onchange="onChange(event)"&gt; からのコールバック<code class="language-js">
+<span class="keyword token">function</span> <span class="function token">onChange</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> file <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> reader <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FileReader</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  reader<span class="punctuation token">.onerror </span><span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{
+    alert("</span></code>ファイルの読み込みに失敗しました。<code class="language-js"><span class="punctuation token">\n\n" + reader.error);</span>
+    <span class="punctuation token">reader.abort(); // </span></code>(...これは onerror ハンドラで何か有用なことをするのでしょうか？)<code class="language-js">
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+  reader<span class="punctuation token">.</span><span class="function token">readAsText</span><span class="punctuation token">(</span>file<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
diff --git a/files/ja/web/api/filereader/onload/index.html b/files/ja/web/api/filereader/onload/index.html
new file mode 100644
index 0000000000..cee0e907f9
--- /dev/null
+++ b/files/ja/web/api/filereader/onload/index.html
@@ -0,0 +1,29 @@
+---
+title: FileReader.onload
+slug: Web/API/FileReader/onload
+tags:
+  - Event Handler
+  - File
+  - FileReader
+  - Property
+  - Reference
+translation_of: Web/API/FileReader/onload
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>FileReader.onload</code></strong> プロパティは、<a href="/ja/docs/Web/API/FileReader/readAsArrayBuffer">readAsArrayBuffer</a> や <a href="/ja/docs/Web/API/FileReader/readAsBinaryString">readAsBinaryString</a>、 <a href="/ja/docs/Web/API/FileReader/readAsDataURL">readAsDataURL</a>、<a href="/ja/docs/Web/API/FileReader/readAsText">readAsText</a> でのコンテンツ読み込みが完了して、利用可能になると発火する {{event('load')}} イベント時に実行されるイベントハンドラを含みます。</p>
+
+<h2 id="例">例</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">// &lt;input type="file" onchange="onChange(event)"&gt; からのコールバック
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // ファイルのテキストがここにプリントされる
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+</code></pre>
diff --git a/files/ja/web/api/filereader/progress_event/index.html b/files/ja/web/api/filereader/progress_event/index.html
new file mode 100644
index 0000000000..b628614784
--- /dev/null
+++ b/files/ja/web/api/filereader/progress_event/index.html
@@ -0,0 +1,174 @@
+---
+title: 'FileReader: progress イベント'
+slug: Web/API/FileReader/progress_event
+tags:
+  - API
+  - Event
+  - FileReader
+  - ProgressEvent
+  - Reference
+  - Web
+  - progress
+  - イベント
+translation_of: Web/API/FileReader/progress_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>progress</code> イベントは、 <code>FileReader</code> がデータを読むときに定期的に発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("FileReader.onprogress")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+
+    &lt;div class="file-select"&gt;
+        &lt;label for="avatar"&gt;Choose a profile picture:&lt;/label&gt;
+        &lt;input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg"&gt;
+    &lt;/div&gt;
+
+    &lt;img src="" class="preview" height="200" alt="Image preview..."&gt;
+
+    &lt;div class="event-log"&gt;
+        &lt;label&gt;Event log:&lt;/label&gt;
+        &lt;textarea readonly class="event-log-contents"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.preview {
+  margin: 1rem 0;
+}
+
+.event-log-contents {
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.example {
+  display: grid;
+  grid-template-areas:
+              "select  log"
+              "preview log";
+}
+
+.file-select {
+  grid-area: select;
+}
+
+.preview {
+  grid-area: preview;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log&gt;label {
+  display: block;
+}
+
+.event-log-contents {
+  resize: none;
+}</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-progress-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.FileReader.progress_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>Related events: {{domxref("FileReader.loadstart_event", "loadstart")}}, {{domxref("FileReader.loadend_event", "loadend")}}, {{domxref("FileReader.load_event", "load")}}, {{domxref("FileReader.error_event", "error")}}, {{domxref("FileReader.abort_event", "abort")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/readasarraybuffer/index.html b/files/ja/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..ae75e25f13
--- /dev/null
+++ b/files/ja/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,64 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/readAsArrayBuffer
+tags:
+  - API
+  - DOM
+  - File API
+  - FileReader
+  - Files
+  - Method
+  - Reference
+  - readAsArrayBuffer
+translation_of: Web/API/FileReader/readAsArrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>{{domxref("FileReader")}} インターフェイスの <strong><code>readAsArrayBuffer()</code></strong> メソッドは、指定された {{domxref("Blob")}} ないし {{domxref("File")}} オブジェクトの内容を読み込むために使用します。読み込み処理が終了すると {{domxref("FileReader.readyState","readyState")}} が <code>DONE</code> に変わり、 {{domxref("FileReader/loadend_event", "loadend")}} イベントが発行されます。それと同時に、 {{domxref("FileReader.result","result")}} プロパティにはファイルのデータを表す {{domxref("ArrayBuffer")}} が格納されます。</p>
+
+<div class="blockIndicator note">
+<p><strong>より新しい API が利用可能です</strong><br>
+ {{domxref("Blob.arrayBuffer()")}} メソッドは、ファイルを ArrayBuffer として読み取るための Promise ベースのより新しい API です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>instanceOfFileReader</var>.readAsArrayBuffer(<var>blob</var>);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>blob</var></code></dt>
+ <dd>メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。</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", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.FileReader.readAsArrayBuffer")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/readasbinarystring/index.html b/files/ja/web/api/filereader/readasbinarystring/index.html
new file mode 100644
index 0000000000..2c0899a89b
--- /dev/null
+++ b/files/ja/web/api/filereader/readasbinarystring/index.html
@@ -0,0 +1,89 @@
+---
+title: FileReader.readAsBinaryString()
+slug: Web/API/FileReader/readAsBinaryString
+tags:
+  - API
+  - File API
+  - Files
+  - Method
+  - Reference
+translation_of: Web/API/FileReader/readAsBinaryString
+---
+<p>{{APIRef("File API")}}</p>
+
+<div class="hidden">
+<p>{{event("loadend")}}は英語版では {{domxref("XMLHttpRequest/loadend_event", "loadend")}} にリダイレクトされますが、日本語版ではリダイレクト元ページが存在しない（作成も不可）ため、日本語版ではリダイレクト先を直接記述しています。</p>
+</div>
+
+<p><code>readAsBinaryString</code> メソッドは、 指定された {{domxref("Blob")}} ないし {{domxref("File")}} オブジェクトを読み込むために使用します。 読込処理が終了すると {{domxref("FileReader.readyState","readyState")}} は <code>DONE</code> に変わり、{{domxref("XMLHttpRequest/loadend_event", "loadend")}} イベントが生じます。それと同時に {{domxref("FileReader.result","result")}} プロパティには生のバイナリデータを文字列で解釈したものが格納されます。</p>
+
+<p>このメソッドは、File API の仕様から一度削除されましたが、後方互換のために再導入されました。<br>
+ {{domxref("FileReader.readAsArrayBuffer()")}} の使用が推奨されています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre>
+
+<h3 id="Parameters" name="Parameters">パラメータ</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js notranslate">var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onload = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">仕様</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.FileReader.readAsBinaryString")}}</p>
+
+<h2 id="See_also" name="See also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/readasdataurl/index.html b/files/ja/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..cd53d210e4
--- /dev/null
+++ b/files/ja/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,133 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+tags:
+  - API
+  - Base 64
+  - File API
+  - FileReader
+  - Files
+  - Method
+  - Reference
+  - メソッド
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<p><code>readAsDataURL</code> メソッドは、指定された{{domxref("Blob")}} または {{domxref("File")}} の内容を読み込むために使用されます。読み込み操作が終了すると、{{domxref("FileReader.readyState", "readyState")}} が <code>DONE</code> となり、{{event("loadend")}} が発生します。このとき、{{domxref("FileReader.result", "result")}} 属性には、ファイルのデータを表す、base64 エンコーディングされた <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">data: URL</a> の文字列が格納されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> blob の {{domxref("FileReader.result","result")}} は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から <code>data:*/*;base64,</code> を削除しておく必要があります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="画像のプレビュー..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function previewFile() {
+  const preview = document.querySelector('img');
+  const file = document.querySelector('input[type=file]').files[0];
+  const reader = new FileReader();
+
+  reader.addEventListener("load", function () {
+    // 画像ファイルを base64 文字列に変換します
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}</pre>
+
+<h3 id="Live_Result" name="Live_Result">ライブ結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
+
+<h2 id="Example_reading_multiple_files" name="Example_reading_multiple_files">複数ファイルを読み取る例</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input id="browse" type="file" onchange="previewFiles()" multiple&gt;
+&lt;div id="preview"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js notranslate">function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // `file.name` が拡張子の基準と一致していることを確認します。
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}</pre>
+
+<div class="note"><strong>メモ:</strong> Internet Explorer 10 以前では <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> コンストラクターに対応していません。十分な互換性が必要とされるときは <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a> または <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a> を参照してください。</div>
+
+<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", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.FileReader.readAsDataURL")}}</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("URL.createObjectURL()")}}</li>
+</ul>
+
+<div>{{APIRef("File API")}}</div>
diff --git a/files/ja/web/api/filereader/readastext/index.html b/files/ja/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..5f9109dcc0
--- /dev/null
+++ b/files/ja/web/api/filereader/readastext/index.html
@@ -0,0 +1,63 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+tags:
+  - API
+  - File API
+  - Reference
+  - ファイル
+  - メソッド
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>readAsText()</code></strong> メソッドは、指定された {{domxref("Blob")}} または {{domxref("File")}} の内容を読み取るために使用します。読み取り操作が完了すると、 {{domxref("FileReader.readyState","readyState")}} が <code>DONE</code> に変わり、 {{event("loadend")}} イベントが発生し、 {{domxref("FileReader.result","result")}} プロパティにはファイルの内容が文字列として格納されます。</p>
+
+<div class="blockIndicator note">
+<p><strong>より新しい API が利用できます</strong><br>
+ {{domxref("Blob.text()")}} メソッドは、ファイルをテキストとして読み取るための新しい Promise ベースの API です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>instanceOfFileReader</var>.readAsText(<var>blob</var>[, <var>encoding</var>]);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。</dd>
+ <dt><code>encoding</code> {{optional_inline}}</dt>
+ <dd>読込の際に使用する文字エンコーディングを指定する文字列です。この引数が指定されなかった場合は UTF-8 で解釈されます。</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", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.FileReader.readAsText")}}</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/readystate/index.html b/files/ja/web/api/filereader/readystate/index.html
new file mode 100644
index 0000000000..4e7b2916d2
--- /dev/null
+++ b/files/ja/web/api/filereader/readystate/index.html
@@ -0,0 +1,94 @@
+---
+title: FileReader.readyState
+slug: Web/API/FileReader/readyState
+tags:
+  - API
+  - File API
+  - Reference
+  - ファイル
+  - プロパティ
+translation_of: Web/API/FileReader/readyState
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>{{domxref("FileReader")}} の <strong><code>readyState</code></strong> プロパティは、 <code>FileReader</code> がいる読み取り操作の現在の状態を提供します。 <code>FileReader</code> は以下のいずれかの状態にあります。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">値</th>
+   <th scope="col">状態</th>
+   <th scope="col">説明</th>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>EMPTY</code></td>
+   <td>Reader が作成されました。まだ読み込まれているメソッドはありません。</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>LOADING</code></td>
+   <td>read メソッドが呼び出されました。</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>DONE</code></td>
+   <td>操作が完了しています。</td>
+  </tr>
+ </thead>
+</table>
+
+<dl>
+ <dt><code>EMPTY</code></dt>
+ <dd><code>FileReader</code> は作成されましたが、 readAs メソッドはまだ呼び出されていません。</dd>
+ <dt><code>LOADING</code></dt>
+ <dd>readAs メソッドが呼び出されました。 {{domxref("File")}} または {{domxref("Blob")}} が読み取り中であり、まだエラーは発生していません。</dd>
+ <dt><code>DONE</code></dt>
+ <dd>読み取り操作が完了しています。これは、 {{domxref("File")}} または {{domxref("Blob")}} の全体がメモリに読み込まれたか、ファイル読み取りエラーが発生したか、 {{domxref("FileReader.abort()", "abort()")}} が呼び出され、読み取りがキャンセルされたか、いずれかを意味します。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js notranslate">var reader = new FileReader();
+console.log('EMPTY', reader.readyState); // readyState は 0 になります。
+reader.readAsText(blob);
+console.log('LOADING', reader.readyState); // readyState は 1 になります。
+
+reader.onloadend = function () {
+  console.log('DONE', reader.readyState); // readyState は 2 になります。};
+</pre>
+
+<h2 id="Value" name="Value">値</h2>
+
+<p>{{domxref("FileReader")}} API のために定義されている3つの状態定数のうちの1つです。</p>
+
+<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", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.FileReader.readyState")}}</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/ja/web/api/filereader/result/index.html b/files/ja/web/api/filereader/result/index.html
new file mode 100644
index 0000000000..5d42ceca55
--- /dev/null
+++ b/files/ja/web/api/filereader/result/index.html
@@ -0,0 +1,105 @@
+---
+title: FileReader.result
+slug: Web/API/FileReader/result
+tags:
+  - API
+  - File API
+  - FileReader
+  - Reference
+  - result
+  - ファイル
+  - プロパティ
+translation_of: Web/API/FileReader/result
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>{{domxref("FileReader")}} の <code><strong>result</strong></code> プロパティは、ファイルの内容を返します。このプロパティは、読み取り操作が完了した後でのみ有効で、データの形式は、読み取り操作を開始するために使用されたメソッドによって異なります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>file</var> = <var>instanceOfFileReader</var>.result
+</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>読み取り操作を開始するためにどの読み取りメソッドが使用されたかに基づく、適切な文字列または {{jsxref("ArrayBuffer")}} です。読み取りがまだ完了していないか、失敗した場合は、値は <code>null</code> になります。</p>
+
+<p>結果の型は以下に記載されています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">メソッド</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("FileReader/readAsArrayBuffer", "readAsArrayBuffer()")}}</td>
+   <td><code>result</code> はバイナリデータを含む JavaScript の {{jsxref("Global_Objects/ArrayBuffer", "ArrayBuffer")}} になります。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReader/readAsBinaryString", "readAsBinaryString()")}}</td>
+   <td><code>result</code> にはファイルからの生のバイナリデータが文字列で格納されます。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReader/readAsDataURL", "readAsDataURL()")}}</td>
+   <td><code>result</code> はファイルのデータを表す <code>data:</code> URL の文字列になります。</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReader/readAsText", "readAsText()")}}</td>
+   <td><code>result</code> は文字列のテキストです。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は、<a href="/ja/docs/Web/HTML/Element/input/file">ファイル入力</a>からファイルを読み込む関数 <code>read()</code> を示しています。これは {{domxref("FileReader")}} オブジェクトを作成し、 {{domxref("FileReader/load_event", "load")}} イベントのリスナーを作成し、ファイルが読み込まれるとその <code>result</code> を取得し、提供されたコールバック関数を <code>read()</code> に渡すことによって機能します。</p>
+
+<p>内容は生のテキストデータとして扱われます。</p>
+
+<pre class="brush: js notranslate">var fileInput = document.querySelector('input[type="file"]');
+
+function read(callback) {
+  var file = fileInput.files.item(0);
+  var reader = new FileReader();
+
+  reader.onload = function() {
+    callback(reader.result);
+  }
+
+  reader.readAsText(file);
+}
+</pre>
+
+<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", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.FileReader.result")}}</p>
+
+<h2 id="See_also" name="See_also">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>