1 files changed, 213 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/filereader/index.html b/files/zh-tw/web/api/filereader/index.html
new file mode 100644
index 0000000000..4b80e334a4
--- /dev/null
+++ b/files/zh-tw/web/api/filereader/index.html
@@ -0,0 +1,213 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - File API
+  - Files
+  - Interface
+  - Reference
+translation_of: Web/API/FileReader
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>藉由 <code>FileReader</code> 物件，Web 應用程式能以非同步（asynchronously）方式讀取儲存在用戶端的檔案（或原始資料暫存）內容，可以使用 {{domxref("File")}} 或 {{domxref("Blob")}} 物件指定要讀取的資料。</p>
+
+<p>File 物件可以從使用者於 {{HTMLElement("input")}} 元素選擇之檔案所回傳的 {{domxref("FileList")}} 物件當中取得，或是來自<a href="/docs/Web/Guide/HTML/Drag_and_drop">拖放操作</a>所產生的 {{domxref("DataTransfer")}} 物件之中，也能由 {{domxref("HTMLCanvasElement")}} 物件（元素物件）執行 <code>mozGetAsFile()</code> 方法後回傳。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="建構式">建構式</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
+ <dd>建立新的 <code>FileReader</code> 物件。</dd>
+</dl>
+
+<p>請參考<a href="/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a>的更多細節與範例。</p>
+
+<h2 id="屬性">屬性</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="事件處理器">事件處理器</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")}} 事件處理器，於每一次讀取結束之後觸發（不論成功或失敗），會於 <code>onload</code> 或 <code>onerror</code> 事件處理器之後才執行。</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="方法">方法</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> 將以字串型式來表示讀入的原始二進位資料（raw binary data）。</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>開始讀取指定的 {{domxref("Blob")}}，讀取完成後屬性 <code>result</code> 將以 <code>data:</code> URL 格式（base64 編碼）的字串來表示讀入的資料內容。</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>開始讀取指定的 {{domxref("Blob")}}，讀取完成後屬性 <code>result</code> 將以文字字串型式來表示讀入的資料內容。</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[2]</sup></td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>在 Web Workers 的支援</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>error</code> property uses {{domxref("DOMException")}}, not {{domxref("DOMError")}}</td>
+   <td>{{CompatGeckoDesktop(58)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+  <tr>
+   <td>在 Web Workers 的支援</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>error</code> property uses {{domxref("DOMException")}}, not {{domxref("DOMError")}}</td>
+   <td>{{CompatGeckoMobile(58)}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在 Gecko 2.0 beta 7 (Firefox 4.0 beta 7) 以前，所有的 {{domxref("Blob")}} 參數都屬於 {{domxref("File")}} 參數；之後為了更符合規範，所以更新了這個特徵。在 Gecko 13.0 {{geckoRelease("13.0")}} 以前，<code>FileReader.error</code> 屬性回傳了 {{domxref("FileError")}} 物件。這個介面之後被移除、而 <code>FileReader.error</code> 目前會回傳 {{domxref("DOMError")}} 並定義為 FileAPI draft。</p>
+
+<p>[2] Opera 在 11.1 <a href="http://www.opera.com/docs/specs/presto28/file/">有限度支援</a>。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/docs/Using_files_from_web_applications">在網頁應用程式中使用本地檔案</a></li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>