initial commit

13 files changed, 1318 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/filereader/abort/index.html b/files/zh-cn/web/api/filereader/abort/index.html
new file mode 100644
index 0000000000..195f05b1bb
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/abort/index.html
@@ -0,0 +1,98 @@
+---
+title: FileReader.abort()
+slug: Web/API/FileReader/abort
+translation_of: Web/API/FileReader/abort
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>该方法可以取消 FileReader 的读取操作，触发之后 {{domxref("FileReader.readyState","readyState")}} 为已完成（DONE）。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.abort();</pre>
+
+<h3 id="例外情况">例外情况</h3>
+
+<dl>
+ <dt><code>DOM_FILE_ABORT_ERR</code></dt>
+ <dd>对一个没有正在进行读取操作（{{domxref("FileReader.readyState","readyState")}} 不是<code>LOADING</code>）的 FileReader 进行 abort 操作，会抛出 <code>DOM_FILE_ABORT_ERR 错误。</code></dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "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>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前，上述方法中所有的 {{domxref("Blob")}} 参数都只能是一个 {{domxref("File")}} 对象。根据最新的 FileAPI 草案，现在的所有的 {{domxref("Blob")}} 参数既可以是<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Blob")}} 对象也可以是一个<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("File")}} 对象。在Gecko 13.0 {{geckoRelease("13.0")}} 之前，FileReader.error 属性会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileError">FileError</a> 对象。根据最新的FileAPI草案，现在的  FileReader.error会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMError">DOMError</a> 对象。</p>
+
+<p>[2] IE9有一个 <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera从11.10开始 <a href="http://www.opera.com/docs/specs/presto28/file/">部分支持</a> .</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/error/index.html b/files/zh-cn/web/api/filereader/error/index.html
new file mode 100644
index 0000000000..056b44219c
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/error/index.html
@@ -0,0 +1,96 @@
+---
+title: FileReader.error
+slug: Web/API/FileReader/error
+translation_of: Web/API/FileReader/error
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>返回读取文件时的错误信息</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <var>error</var> = <em>instanceOfFile</em>Reader.error
+</pre>
+
+<h2 id="返回值">返回值</h2>
+
+<p>返回一个 {{domxref("DOMError")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "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>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前，上述方法中所有的 {{domxref("Blob")}} 参数都只能是一个 {{domxref("File")}} 对象。根据最新的 FileAPI 草案，现在的所有的 {{domxref("Blob")}} 参数既可以是<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Blob")}} 对象也可以是一个<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("File")}} 对象。在Gecko 13.0 {{geckoRelease("13.0")}} 之前，FileReader.error 属性会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileError">FileError</a> 对象。根据最新的FileAPI草案，现在的  FileReader.error会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMError">DOMError</a> 对象。</p>
+
+<p>[2] IE9有一个 <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera从11.10开始 <a href="http://www.opera.com/docs/specs/presto28/file/">部分支持</a> .</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/filereader/index.html b/files/zh-cn/web/api/filereader/filereader/index.html
new file mode 100644
index 0000000000..ed7206707f
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/filereader/index.html
@@ -0,0 +1,59 @@
+---
+title: FileReader()
+slug: Web/API/FileReader/FileReader
+tags:
+  - API
+  - FileReader
+  - 参考
+  - 构造方法
+translation_of: Web/API/FileReader/FileReader
+---
+<p>使用 <strong><code>FileReader()</code></strong> 构造器去创建一个新的 FileReader.</p>
+
+<p>更多关于 <code>FileReader</code>,  查看<a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">在Web应用中使用files</a>。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var reader = new FileReader();</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>None.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>以下代码展示了如何使用 <code>FileReader()</code> 构造器创建 <code><a href="/en-US/docs/Web/API/FileReader">FileReader</a></code> 对象，和<code><a href="/en-US/docs/Web/API/FileReader">FileReader</a></code>对象的用法。</p>
+
+<pre class="brush: js">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">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/index.html b/files/zh-cn/web/api/filereader/index.html
new file mode 100644
index 0000000000..316b42f53e
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/index.html
@@ -0,0 +1,220 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - File API
+  - Files
+  - Interface
+  - Reference
+translation_of: Web/API/FileReader
+---
+<p>{{APIRef("File API")}}</p>
+
+<p><code><strong>FileReader</strong></code> 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 {{domxref("File")}} 或 {{domxref("Blob")}} 对象指定要读取的文件或数据。</p>
+
+<p>其中File对象可以是来自用户在一个{{ HTMLElement("input") }}元素上选择文件后返回的{{ domxref("FileList") }}对象,也可以来自拖放操作生成的 <a href="/zh-CN/docs/Web/API/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a>对象,还可以是来自在一个{{ domxref("HTMLCanvasElement") }}上执行<code>mozGetAsFile()</code>方法后返回结果。</p>
+
+<p>重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
+ <dd>返回一个新构造的<code>FileReader</code>。</dd>
+</dl>
+
+<p>有关详细信息和示例，请参阅<a href="/zh-CN/Using_files_from_web_applications" title="en/Using files from web applications">如何在web应用程序中使用文件</a>。</p>
+
+<h2 id="Method_overview" name="Method_overview">属性</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 class="header">常量名</td>
+    <td class="header">值</td>
+    <td class="header">描述</td>
+   </tr>
+   <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")}}事件。该事件在读取操作结束时（要么成功，要么失败）触发。</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="Properties" name="Properties">方法</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")}}中的内容, 一旦完成, result 属性中保存的将是被读取文件的 {{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格式的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">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</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>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>12.02<sup>[2]</sup></td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>Support in 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>Feature</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>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+  <tr>
+   <td>Support in 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] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p>
+
+<p>[2] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+ <li><a href="/zh-CN/Using_files_from_web_applications" title="en/Using files from web applications">如何在web应用程序中使用文件</a></li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/load_event/index.html b/files/zh-cn/web/api/filereader/load_event/index.html
new file mode 100644
index 0000000000..227e52a463
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/load_event/index.html
@@ -0,0 +1,167 @@
+---
+title: 'FileReader: load event'
+slug: Web/API/FileReader/load_event
+tags:
+  - 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>No</td>
+  </tr>
+  <tr>
+   <th scope="row">是否能中断退出</th>
+   <td>No</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="例子">例子</h2>
+
+<h3 id="Live_example">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="结果">结果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-load-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">在这个页面中的兼容性表格从标准化的数据中生成。如果你想贡献数据，请检查<a 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="请参阅">请参阅</h2>
+
+<ul>
+ <li>Related events: {{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/zh-cn/web/api/filereader/onabort/index.html b/files/zh-cn/web/api/filereader/onabort/index.html
new file mode 100644
index 0000000000..d992162230
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/onabort/index.html
@@ -0,0 +1,12 @@
+---
+title: FileReader.onabort
+slug: Web/API/FileReader/onabort
+translation_of: Web/API/FileReader/onabort
+---
+<p><strong><code>FileReader.onabort</code></strong> 属性包含在终止事件被触发时执行的事件处理程序，举例，当读取文件的过程中需要中止时。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">reader.onabort = function() { ... };</pre>
+
+<p> </p>
diff --git a/files/zh-cn/web/api/filereader/onload/index.html b/files/zh-cn/web/api/filereader/onload/index.html
new file mode 100644
index 0000000000..971ffa3d37
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/onload/index.html
@@ -0,0 +1,25 @@
+---
+title: FileReader.onload
+slug: Web/API/FileReader/onload
+tags:
+  - 文件
+translation_of: Web/API/FileReader/onload
+---
+<p>{{APIRef}}</p>
+
+<p>当 <strong>FileReader </strong>读取文件的方式为<strong> </strong> <a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">readAsArrayBuffer</a>, <a href="/en-US/docs/Web/API/FileReader/readAsBinaryString">readAsBinaryString</a>, <a href="/en-US/docs/Web/API/FileReader/readAsDataURL">readAsDataURL</a> 或者 <a href="/en-US/docs/Web/API/FileReader/readAsText">readAsText</a> 的时候，会触发一个 {{event('load')}} 事件。从而可以使用  <strong><code>FileReader.onload</code></strong> 属性对该事件进行处理。</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/zh-cn/web/api/filereader/readasarraybuffer/index.html b/files/zh-cn/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..2d22e8bb1d
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,98 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/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>（已完成），并触发 {{event("loadend")}} 事件，同时 {{domxref("FileReader.result","result")}} 属性中将包含一个 {{domxref("ArrayBuffer")}} 对象以表示所读取文件的数据。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>即将被读取的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</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>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前，上述方法中所有的 {{domxref("Blob")}} 参数都只能是一个 {{domxref("File")}} 对象。根据最新的 FileAPI 草案，现在的所有的 {{domxref("Blob")}} 参数既可以是<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Blob")}} 对象也可以是一个<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("File")}} 对象。在Gecko 13.0 {{geckoRelease("13.0")}} 之前，FileReader.error 属性会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileError">FileError</a> 对象。根据最新的FileAPI草案，现在的  FileReader.error会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMError">DOMError</a> 对象。</p>
+
+<p>[2] IE9有一个 <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera从11.10开始 <a href="http://www.opera.com/docs/specs/presto28/file/">部分支持</a> .</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/readasbinarystring/index.html b/files/zh-cn/web/api/filereader/readasbinarystring/index.html
new file mode 100644
index 0000000000..135709795e
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/readasbinarystring/index.html
@@ -0,0 +1,115 @@
+---
+title: FileReader.readAsBinaryString()
+slug: Web/API/FileReader/readAsBinaryString
+translation_of: Web/API/FileReader/readAsBinaryString
+---
+<div>{{APIRef("File API")}} {{non-standard_header}}</div>
+
+<div> </div>
+
+<p><code>readAsBinaryString</code> 方法会读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象，当读取完成的时候，{{domxref("FileReader.readyState","readyState")}}  会变成<code>DONE</code>（已完成），并触发 {{event("loadend")}} 事件，同时 {{domxref("FileReader.result","result")}} 属性将包含所读取文件原始二进制格式。</p>
+
+<p>注意：从 2012 年 7 月 12 日起，该方法已从 W3C 工作草案废除。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>即将被读取的 {{domxref("Blob")}} 或者 {{domxref("File")}} 对象。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">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.onloadend = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});</pre>
+
+<h2 id="规范">规范</h2>
+
+<p>该方法已从 FileAPI 标准移除，请使用 {{domxref("FileReader.readAsArrayBuffer()")}} 代替。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatNo}}</td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前，上述方法中所有的 {{domxref("Blob")}} 参数都只能是一个 {{domxref("File")}} 对象。根据最新的 FileAPI 草案，现在的所有的 {{domxref("Blob")}} 参数既可以是<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Blob")}} 对象也可以是一个<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("File")}} 对象。在Gecko 13.0 {{geckoRelease("13.0")}} 之前，FileReader.error 属性会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileError">FileError</a> 对象。根据最新的FileAPI草案，现在的  FileReader.error会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMError">DOMError</a> 对象。</p>
+
+<p>[2] IE9有一个 <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera从11.10开始 <a href="http://www.opera.com/docs/specs/presto28/file/">部分支持</a> .</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/readasdataurl/index.html b/files/zh-cn/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..1efde1a9fe
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,121 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+tags:
+  - API
+  - File API
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><code>readAsDataURL</code> 方法会读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。读取操作完成的时候，{{domxref("FileReader.readyState","readyState")}} 会变成已完成<code>DONE</code>，并触发 {{event("loadend")}} 事件，同时 {{domxref("FileReader.result","result")}} 属性将包含一个<code>data:</code>URL格式的字符串（base64编码）以表示所读取文件的内容。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>即将被读取的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="Image preview..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}</pre>
+
+<h3 id="演示">演示</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
+
+<h2 id="读取多个文件的例子">读取多个文件的例子</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&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">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="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.FileReader.readAsDataURL")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("URL.createObjectURL()")}}</li>
+</ul>
+
+<p>{{APIRef("File API")}}</p>
diff --git a/files/zh-cn/web/api/filereader/readastext/index.html b/files/zh-cn/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..dd9618490f
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/readastext/index.html
@@ -0,0 +1,110 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<div> </div>
+
+<p><code>readAsText</code> 方法可以将 <a href="/zh-CN/docs/Web/API/Blob">Blob</a> 或者 <a href="/zh-CN/docs/Web/API/File">File</a><a href="/zh-CN/docs/MDN/Doc_status/API/File_API"> </a>对象转根据特殊的编码格式转化为内容(字符串形式)</p>
+
+<p>这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined</p>
+
+<p>也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果</p>
+
+<p>当转化完成后， <a href="/en-US/docs/Web/API/FileReader/readyState">readyState</a> 这个参数就会转换 为 done 即完成态， <a href="/en-US/docs/Web/Events/loadend">event("loadend")</a> 挂载的事件会被触发，并可以通过事件返回的形参得到中的 <a href="/zh-CN/docs/Web/API/FileReader/result">FileReader.result</a> 属性得到转化后的结果</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em> instance of <em>FileReader</em></em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>二进制对象</code></dt>
+ <dd><a href="/zh-CN/docs/Web/API/Blob">Blob</a>类型 或 <a href="/zh-CN/docs/Web/API/File">File</a>类型</dd>
+ <dt>编码类型  (可选)</dt>
+ <dd>传入一个字符串类型的编码类型，如缺省，则默认为“utf-8”类型</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "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>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p>[1] 在 Gecko 2.0 beta 7 (Firefox 4.0 beta 7) 之前,所有 <a href="/zh-CN/docs/Web/API/File">File</a> 类型,都是<a href="/zh-CN/docs/Web/API/Blob"> Blob</a>类型的一个子集,这已经正确的被纳入到规范里了.在 Gecko 13.0 之前,如果我们错误的传参会导致 FileReader 返回一个<a href="/zh-CN/docs/Web/API/FileError">FileError</a>对象.而<a href="/zh-CN/docs/Web/API/FileError">FileError</a> 这个实例已经从FileReader 规范中被移除了.而在最新的FileAPI 草稿中定义的错误处理机制是返回一个 <a href="/en-US/docs/Web/API/DOMError">DOMError</a> 对象.</p>
+
+<p>[2] IE9 采用的是 <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.实现编码格式化</p>
+
+<p>[3] 在Opera11.1 版本中只是被<a href="http://www.opera.com/docs/specs/presto28/file/">部分支持</a></p>
+
+<h2 id="其他文档">其他文档 </h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/FileReader">FileReader</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/readystate/index.html b/files/zh-cn/web/api/filereader/readystate/index.html
new file mode 100644
index 0000000000..d0d60eacc3
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/readystate/index.html
@@ -0,0 +1,101 @@
+---
+title: FileReader.readyState
+slug: Web/API/FileReader/readyState
+translation_of: Web/API/FileReader/readyState
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>提供 FileReader 读取操作时的当前状态。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var state = <em>instanceOfFileReader</em>.readyState
+</pre>
+
+<h2 id="值">值</h2>
+
+<p>一个数字，用来表示 {{domxref("FileReader")}} API 的三种可能状态。</p>
+
+<p>{{page("/zh-CN/docs/Web/API/FileReader","State constants")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "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>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前，上述方法中所有的 {{domxref("Blob")}} 参数都只能是一个 {{domxref("File")}} 对象。根据最新的 FileAPI 草案，现在的所有的 {{domxref("Blob")}} 参数既可以是<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Blob")}} 对象也可以是一个<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("File")}} 对象。在Gecko 13.0 {{geckoRelease("13.0")}} 之前，FileReader.error 属性会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileError">FileError</a> 对象。根据最新的FileAPI草案，现在的  FileReader.error会返回一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/DOMError">DOMError</a> 对象。</p>
+
+<p>[2] IE9有一个 <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera从11.10开始 <a href="http://www.opera.com/docs/specs/presto28/file/">部分支持</a> .</p>
+
+<h2 id="See_also" name="See_also">相关链接</h2>
+
+<ul>
+</ul>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/filereader/result/index.html b/files/zh-cn/web/api/filereader/result/index.html
new file mode 100644
index 0000000000..d459d6af67
--- /dev/null
+++ b/files/zh-cn/web/api/filereader/result/index.html
@@ -0,0 +1,96 @@
+---
+title: FileReader.result
+slug: Web/API/FileReader/result
+translation_of: Web/API/FileReader/result
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var file = <em>instanceOfFileReader</em>.result
+</pre>
+
+<h2 id="值">值</h2>
+
+<p>一个字符串或者一个{{domxref("ArrayBuffer")}} ，这取决于读取操作是使用哪种方法来进行的。</p>
+
+<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", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>初始定义</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>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>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</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>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本特性支持</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</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")}} 对象，这个接口已经被移除。现在根据最新的FileAPI 草案<code>FileReader.error返回一个</code>{{domxref("DOMError")}} 对象。</p>
+
+<p>[2] IE9拥有<a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>。</p>
+
+<p>[3] Opera 11.1版本拥有<a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a>。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>