initial commit

15 files changed, 1381 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/file/file/index.html b/files/zh-cn/web/api/file/file/index.html
new file mode 100644
index 0000000000..efa7b30382
--- /dev/null
+++ b/files/zh-cn/web/api/file/file/index.html
@@ -0,0 +1,112 @@
+---
+title: File.File()
+slug: Web/API/File/File
+translation_of: Web/API/File/File
+---
+<p>{{APIRef("File")}}</p>
+
+<p><code><strong>File()</strong></code> 构造器创建新的 {{domxref("File")}} 对象实例。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var myFile = new File(bits, name[, options]);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>bits</em></dt>
+ <dd>一个包含{{jsxref("ArrayBuffer")}}，{{domxref("ArrayBufferView")}}，{{domxref("Blob")}}，或者 {{domxref("DOMString")}} 对象的 {{jsxref("Array")}} — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。</dd>
+ <dt><em>name</em></dt>
+ <dd>{{domxref("USVString")}}，表示文件名称，或者文件路径。</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>选项对象，包含文件的可选属性。可用的选项如下：
+ <ul>
+  <li><code>type</code>: {{domxref("DOMString")}}，表示将要放到文件中的内容的 MIME 类型。默认值为 <code>""</code> 。</li>
+  <li><code>lastModified</code>: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 {{jsxref("Date.now()")}}。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">var file = new File(["foo"], "foo.txt", {
+  type: "text/plain",
+});</pre>
+
+<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')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("7")}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("7")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.1</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/file/filename/index.html b/files/zh-cn/web/api/file/filename/index.html
new file mode 100644
index 0000000000..4a1a83889e
--- /dev/null
+++ b/files/zh-cn/web/api/file/filename/index.html
@@ -0,0 +1,16 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+translation_of: Web/API/File/fileName
+---
+<div>
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+</div>
+
+<h3 id="概述">概述</h3>
+
+<p>返回文件的名称.由于安全原因,返回的值并不包含文件路径.</p>
+
+<div class="note">该属性已经废弃.请使用{{domxref("File.name")}}来代替.</div>
diff --git a/files/zh-cn/web/api/file/filesize/index.html b/files/zh-cn/web/api/file/filesize/index.html
new file mode 100644
index 0000000000..a434d9db7c
--- /dev/null
+++ b/files/zh-cn/web/api/file/filesize/index.html
@@ -0,0 +1,16 @@
+---
+title: File.fileSize
+slug: Web/API/File/fileSize
+translation_of: Web/API/File/fileSize
+---
+<div>
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+</div>
+
+<h3 id="概述">概述</h3>
+
+<p>返回文件的大小,单位为字节.</p>
+
+<div class="note">该属性已经废弃,请使用{{domxref("File.size")}}来代替.</div>
diff --git a/files/zh-cn/web/api/file/getasbinary/index.html b/files/zh-cn/web/api/file/getasbinary/index.html
new file mode 100644
index 0000000000..172d8d3a41
--- /dev/null
+++ b/files/zh-cn/web/api/file/getasbinary/index.html
@@ -0,0 +1,42 @@
+---
+title: File.getAsBinary
+slug: Web/API/File/getAsBinary
+translation_of: Web/API/File/getAsBinary
+---
+<p>{{APIRef("File API")}}</p>
+
+<h2 id="概述">概述</h2>
+
+<p>将文件内容按照原始二进制形式解析成字符串并返回.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush:js;">// fileInput是一个HTMLInputElement元素: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files是一个FileList对象(类似于NodeList)
+var files = fileInput.files;
+
+// 一个对象,包含了允许的MIME类型
+var accept = {
+    binary : ["image/png", "image/jpeg"],
+    text :   ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i &lt; files.length; i++) {
+    file = files[i];
+
+    // 如果文件的类型能够被检测到
+    if (file !== null) {
+        if (accept.binary.indexOf(file.type) &gt; -1) {
+            // file是个可接受的二进制文件
+            var data = file.getAsBinary();
+        } else if (accept.text.indexOf(file.type) &gt; -1) {
+            // file是个可接受的文本文件
+            var data = file.getAsText();
+            // 使用字符串方法处理data
+        }
+    }
+}</pre>
diff --git a/files/zh-cn/web/api/file/getasdataurl/index.html b/files/zh-cn/web/api/file/getasdataurl/index.html
new file mode 100644
index 0000000000..7f72b124d0
--- /dev/null
+++ b/files/zh-cn/web/api/file/getasdataurl/index.html
@@ -0,0 +1,59 @@
+---
+title: File.getAsDataURL()
+slug: Web/API/File/getAsDataURL
+translation_of: Web/API/File/getAsDataURL
+---
+<div>{{APIRef("File API") }}</div>
+
+<p>{{non-standard_header}}</p>
+
+<p>{{deprecated_header(7.0)}}</p>
+
+<h2 id="概述">概述</h2>
+
+<p>getAsDataURL<code>函数返回一个形如 </code><a href="/en-US/docs/data_URIs"><code>data:</code></a> 的 URL，这个URL包含了所涉及到的内容的编码形式。</p>
+
+<div class="note">
+<p><strong>注：</strong> 这个方法已经废弃，你应该使用 {{domxref("FileReader")}} 对象中的{{domxref("FileReader.readAsDataURL","readAsDataURL()")}} 方法作为替代。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre>var url = <em>instanceOfFile</em>.getAsDataURL();</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个形如 <a href="/en-US/docs/data_URIs"><code>data:</code></a> 的URL字符串</p>
+
+<h2 id="范例">范例</h2>
+
+<pre class="brush: js">// fileInput 是一个 HTMLInputElement 元素: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files 是一个 FileList 对象(类似 NodeList 对象)
+var files = fileInput.files;
+
+// 允许的文件格式数组
+var accept = ["image/png"];
+
+// img 是一个 HTMLImgElement 元素: &lt;img id="myimg"&gt;
+var img = document.getElementById("myimg");
+
+// 假设我们接收第一个所选中的文件类型
+if (accept.indexOf(files[0].mediaType) &gt; -1) {
+  // 显示图片
+  // 和 &lt;img src="data:image/png,&lt;imagedata&gt;"&gt; 效果一样
+  img.src = files[0].getAsDataURL();
+}
+</pre>
+
+<h2 id="详细说明">详细说明</h2>
+
+<p>没有其他说明</p>
+
+<h2 id="参考文章">参考文章</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/file/getastext/index.html b/files/zh-cn/web/api/file/getastext/index.html
new file mode 100644
index 0000000000..a71b8f254e
--- /dev/null
+++ b/files/zh-cn/web/api/file/getastext/index.html
@@ -0,0 +1,45 @@
+---
+title: File.getAsText
+slug: Web/API/File/getAsText
+translation_of: Web/API/File/getAsText
+---
+<p>{{APIRef("File API")}}</p>
+
+<h3 id="概述">概述</h3>
+
+<p>按照指定的编码类型将文件内容解析成字符串并返回.</p>
+
+<h3 id="示例">示例</h3>
+
+<pre class="eval">// fileInput是一个HTMLInputElement元素: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files是一个FileList对象(类似NodeList)
+var files = fileInput.files;
+
+// 一个对象,包含了允许的MIME类型
+var accept = {
+    binary : ["image/png", "image/jpeg"],
+    text :   ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i &lt; files.length; i++) {
+
+    file = files[i];
+
+    // 如果文件的类型能够被检测到
+   if (file !== null) {
+
+        if (accept.text.indexOf(file.mediaType) &gt; -1) {
+
+            // file是个可接受的文本文件,使用utf-8编码读取
+            var data = file.getAsText("utf-8");
+            // 使用字符串方法处理data
+
+        } else if (accept.binary.indexOf(file.mediaType) &gt; -1) {
+            // file是个可接受的二进制文件
+        }
+    }
+}</pre>
diff --git a/files/zh-cn/web/api/file/index.html b/files/zh-cn/web/api/file/index.html
new file mode 100644
index 0000000000..d87a8ed3f0
--- /dev/null
+++ b/files/zh-cn/web/api/file/index.html
@@ -0,0 +1,101 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - File API
+  - Reference
+  - Web
+  - 文件 API
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p>文件（<strong><code>File</code></strong>）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。</p>
+
+<p>通常情况下， <code>File</code> 对象是来自用户在一个 {{HTMLElement("input")}} 元素上选择文件后返回的 {{domxref("FileList")}} 对象,也可以是来自由拖放操作生成的 {{domxref("DataTransfer")}} 对象，或者来自 {{domxref("HTMLCanvasElement")}} 上的 <code>mozGetAsFile</code>() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互（有关详细信息，请参阅{{anch("注意事项")}}。</p>
+
+<p><code>File</code> 对象是特殊类型的 {{domxref("Blob")}}，且可以用在任意的 Blob 类型的 context 中。比如说， {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, 及 {{domxref("XMLHttpRequest", "", "send()")}} 都能处理 <code>Blob</code> 和<code> File</code>。</p>
+
+<p>参考 <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">从Web应用程序使用文件</a> 了解更多信息和例子。</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("File.File", "File()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="zh-CN"><span>返回一个新构建的文件对象（</span><code>File</code></span><span class="short_text" lang="zh-CN"><span>）。</span></span></dd>
+</dl>
+
+<h2 id="Properties" name="Properties">属性</h2>
+
+<p><code>File</code> 接口也继承了 {{domxref("Blob")}} 接口的属性：</p>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>返回当前 <code>File</code> 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>返回当前 <code>File</code> 对象所引用文件最后修改时间的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> 对象。</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd>返回当前 <code>File</code> 对象所引用文件的名字。</dd>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>返回文件的大小。</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>返回 {{domxref("File")}} 相关的 path 或 URL。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>返回文件的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">多用途互联网邮件扩展类型（MIME Type）</a></dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em><code>File</code> 接口没有定义任何方法，但是它从 {{domxref("Blob")}} 接口继承了以下方法：</em></p>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>返回一个新的 <code>Blob</code> 对象，它包含有源 <code>Blob</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')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.File")}}</p>
+
+<h3 id="注意事项">注意事项</h3>
+
+<ul>
+ <li>在 Gecko 中，你可以从 Chrome 代码中使用这个 API。详细内容参见 <a href="https://developer.mozilla.org/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a>。若要从 chrome 代码, JSM 和引导范围中使用它，你必须使用 <code><a href="https://developer.mozilla.org/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code> 来导入它。</li>
+ <li>从Gecko 6.0 {{geckoRelease("6.0")}} 开始，在特权代码（比如扩展中的代码）中，可以将一个 {{interface("nsIFile")}} 对象传入 <code>File</code> 构造函数，从而生成一个 File 对象。</li>
+ <li>从Gecko 8.0 {{geckoRelease("8.0")}} 开始，在 XPCOM 组件代码中，你可以直接使用 <code>new File</code> 来创建一个 <code>File</code> 对象，而不需要像以前那样必须实例化一个 {{interface("nsIDOMFile")}} 对象。<code>File</code> 对象和 {{domxref("Blob")}} 相反，使用第二个参数作为文件名。文件名可以是任意的字符串。
+  <pre class="syntaxbox">new File( Array parts, String filename, BlobPropertyBag properties);
+</pre>
+ </li>
+ <li>下列非标准属性及方法在 Gecko 7 {{geckoRelease("7.0")}} 中就被移除了： {{domxref("File.fileName")}}、{{domxref("File.fileSize")}}、{{domxref("File.getAsBinary()")}}、{{domxref("File.getAsDataURL()")}}、{{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}})。应当使用 {{domxref("File.name")}}、{{domxref("Blob.size")}}，和 {{domxref("FileReader")}} 的方法来代替。</li>
+</ul>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using files from web applications">如何在 Web 应用程序中使用文件</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/zh-CN/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Extensions/Using the DOM File API in chrome code">在 chrome 代码中使用 DOM File API 读取文件</a>（适用于被授权在 Gecko 中运行的代码，例如 Firefox 拓展的代码）</li>
+</ul>
diff --git a/files/zh-cn/web/api/file/lastmodified/index.html b/files/zh-cn/web/api/file/lastmodified/index.html
new file mode 100644
index 0000000000..3f0a31de7c
--- /dev/null
+++ b/files/zh-cn/web/api/file/lastmodified/index.html
@@ -0,0 +1,134 @@
+---
+title: File.lastModified
+slug: Web/API/File/lastModified
+tags:
+  - API
+  - File API
+  - Files
+translation_of: Web/API/File/lastModified
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>只读属性 <code><strong>File.lastModified</strong></code> 返回所引用文件最后修改日期， 为自 1970年1月1日0:00 以来的毫秒数。没有已知的最后修改时间则会返回当前时间。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush:js">var time = <em>instanceOfFile</em>.lastModified;
+</pre>
+
+<h2 id="值">值</h2>
+
+<p>自 1970年1月1日0:00 以来的毫秒数。</p>
+
+<h2 id="实例">实例</h2>
+
+<h3 id="从INPUT标签读取文件">从INPUT标签读取文件</h3>
+
+<pre class="brush: html">&lt;input type="file" multiple id="fileInput"&gt;
+</pre>
+
+<pre class="brush:js">const fileInput = document.getElementById('fileInput');
+fileInput.addEventListener('change', function(event) {
+  // files is a FileList object (simliar to NodeList)
+  const files = event.target.files;
+
+  for (let i = 0; i &lt; files.length; i++) {
+    const date = new Date(files[i].lastModified);
+    alert(files[i].name + ' has a last modified date of ' + date);
+  }
+});
+</pre>
+
+<p>结果：</p>
+
+<p>{{ EmbedLiveSample('Reading_from_file_input', 300, 50) }}</p>
+
+<h3 id="动态创建文件">动态创建文件</h3>
+
+<p>如果文件是动态创建的，可以在构造函数{{domxref("File.File()", "new File()")}} 中提供最后修改时间。如果未提供则会继承文件对象被创建时的{{jsxref("Date.now()")}} 。</p>
+
+<pre class="brush:js">var fileWithDate = new File([], 'file.bin', {
+  lastModified: new Date(2017, 1, 1),
+});
+console.log(fileWithDate.lastModified); //returns 1485903600000
+
+var fileWithoutDate = new File([], 'file.bin');
+console.log(fileWithoutDate.lastModified); //returns current time
+</pre>
+
+<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', '#file-attrs', 'lastModified')}}</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>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.lastModified</td>
+   <td>13.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>10.0</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.lastModified</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{domxref("File")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/file/lastmodifieddate/index.html b/files/zh-cn/web/api/file/lastmodifieddate/index.html
new file mode 100644
index 0000000000..0e00981ba9
--- /dev/null
+++ b/files/zh-cn/web/api/file/lastmodifieddate/index.html
@@ -0,0 +1,22 @@
+---
+title: File.lastModifiedDate
+slug: Web/API/File/lastModifiedDate
+translation_of: Web/API/File/lastModifiedDate
+---
+<p>{{APIRef("File API")}}</p>
+
+<h2 id="概述">概述</h2>
+
+<p>返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush:js">// fileInput是一个HTMLInputElement元素: &lt;input type="file" multiple id="myfileinput"&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files是一个FileList对象(类似于NodeList对象)
+var files = fileInput.files;
+
+for (var i = 0; i &lt; files.length; i++) {
+  alert(files[i].name + " has a last modified date of " + files[i].lastModifiedDate);
+}</pre>
diff --git a/files/zh-cn/web/api/file/mozfullpath/index.html b/files/zh-cn/web/api/file/mozfullpath/index.html
new file mode 100644
index 0000000000..b0ddc2929a
--- /dev/null
+++ b/files/zh-cn/web/api/file/mozfullpath/index.html
@@ -0,0 +1,6 @@
+---
+title: File.mozFullPath
+slug: Web/API/File/mozFullPath
+translation_of: Web/API/File/mozFullPath
+---
+<p>{{APIRef("File API")}}{{draft}}{{Non-standard_header}}</p>
diff --git a/files/zh-cn/web/api/file/name/index.html b/files/zh-cn/web/api/file/name/index.html
new file mode 100644
index 0000000000..a43ef5913b
--- /dev/null
+++ b/files/zh-cn/web/api/file/name/index.html
@@ -0,0 +1,22 @@
+---
+title: File.name
+slug: Web/API/File/name
+translation_of: Web/API/File/name
+---
+<p>{{APIRef("File API")}}</p>
+
+<h3 id="概述">概述</h3>
+
+<p>返回文件的名称.由于安全原因,返回的值并不包含文件路径.</p>
+
+<h3 id="示例">示例</h3>
+
+<pre class="brush:js">// fileInput is a HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (simliar to NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i &lt; files.length; i++) {
+  alert("Filename " + files[i].name);
+}</pre>
diff --git a/files/zh-cn/web/api/file/size/index.html b/files/zh-cn/web/api/file/size/index.html
new file mode 100644
index 0000000000..5ab90e8018
--- /dev/null
+++ b/files/zh-cn/web/api/file/size/index.html
@@ -0,0 +1,30 @@
+---
+title: File.size
+slug: Web/API/File/size
+translation_of: Web/API/File/size
+---
+<p>{{APIRef("File API") }}</p>
+
+<h2 id="概述">概述</h2>
+
+<p><span class="short_text" id="result_box" lang="zh-CN"><span>以字节为单位返回文件的大小。</span></span></p>
+
+<h2 id="语法">语法</h2>
+
+<pre>var size = <em>instanceOfFile</em>.size</pre>
+
+<h2 id="值">值</h2>
+
+<p>一个数</p>
+
+<h2 id="规范"><span class="short_text" id="result_box" lang="zh-CN"><span>规范</span></span></h2>
+
+<p><span class="short_text" id="result_box" lang="zh-CN"><span>不属于任何规范。</span></span></p>
+
+<h2 id="另请参见"><span class="short_text" id="result_box" lang="zh-CN"><span class="alt-edited">另请参见</span></span></h2>
+
+<ul>
+ <li>{{domxref("Blob.size")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-cn/web/api/file/type/index.html b/files/zh-cn/web/api/file/type/index.html
new file mode 100644
index 0000000000..e0281d5078
--- /dev/null
+++ b/files/zh-cn/web/api/file/type/index.html
@@ -0,0 +1,114 @@
+---
+title: File.type
+slug: Web/API/File/type
+translation_of: Web/API/File/type
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>返回 {{domxref("File")}} 对象所表示文件的媒体类型（MIME）。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var name = <em>file</em>.type;</pre>
+
+<h2 id="值">值</h2>
+
+<p>字符串，包含媒体类型（MIME），表示文本是什么类型，例如 PNG 图像是 "image/png"。 </p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="showType(this)"&gt;
+</pre>
+
+<pre class="brush: js">function showType(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    var name = files[i].name;
+    var type = files[i].type;
+    alert("Filename: " + name + " , Type: " + type);
+  }
+}</pre>
+
+<p><strong>注：</strong> 基于当前的实现，浏览器不会实际读取文件的字节流，来判断它的媒体类型。它基于文件扩展来假设；重命名为 .txt 的 PNG 图像文件为 "<em>text/plain</em>" 而不是 "<em>image/png</em>" 。而且，file.type 仅仅对常见文件类型可靠。例如图像、文档、音频和视频。不常见的文件扩展名会返回空字符串。开发者最好不要依靠这个属性，作为唯一的验证方案。</p>
+
+<p> </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', '#dfn-type', 'type')}}</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>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>13.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10.0</td>
+   <td>16.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>File.name</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{webkitbug("32912")}}</p>
+
+<h2 id="Specification" name="Specification">另见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">在 Web 应用中使用文件</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/file/using_files_from_web_applications/index.html b/files/zh-cn/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..8d2a0f91aa
--- /dev/null
+++ b/files/zh-cn/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,536 @@
+---
+title: 在web应用程序中使用文件
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - File
+  - File API
+  - ajax上传
+  - 文件
+  - 文件上传
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>通过使用在 HTML5 中加入到 DOM 的 File API，使在web内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过HTML中的 {{HTMLElement("input/file", '&lt;input type="file"&gt;')}} 元素或者是通过拖拽来选择本地文件。</p>
+
+<p>如果你想通过扩展或者其它的chrome源码浏览器（browser chrome code）使用DOM File API，是可行的；然而，需要注意有一些附加特性。详细请见 <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a>。</p>
+
+<h2 id="访问被选择的文件">访问被选择的文件</h2>
+
+<p>考虑这段 HTML:</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input"&gt;</pre>
+
+<p>通过 File API，我们可以访问 {{DOMxRef("FileList")}}，它包含了表示用户所选文件的 {{DOMxRef("File")}} 对象</p>
+
+<p>如果用户只选择了一个文件，那么只需要考虑列表中的第一个文件。</p>
+
+<p>使用传统的 DOM 选择器访问一个被选择的文件：</p>
+
+<pre class="brush: js notranslate">const selectedFile = document.getElementById('input').files[0];
+</pre>
+
+<h3 id="通过_change_事件访问被选择的文件"><strong>通过 change 事件访问被选择的文件</strong></h3>
+
+<p>可以（但不是强制的）通过 <code>change</code> 事件访问 {{DOMxRef("FileList")}}：</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>当用户选择一个文件时，<code>handleFiles()</code> 方法会用一个 {{DOMxRef("FileList")}} 对象作为参数被调用，{{DOMxRef("FileList")}} 对象包含表示用户选择的文件的 {{DOMxRef("File")}} 对象。</p>
+
+<p>如果你想让用户选择多个文件，只需在 <code>input</code> 元素上使用 <code>multiple</code> 属性：</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="input" multiple onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>在这个例子中，对于每个用户选择的文件，传递给 <code>handleFiles()</code>方法的文件列表都包含一个对应的 {{DOMxRef("File")}} 对象。</p>
+
+<h3 id="动态添加change监听器"><strong>动态添加change监听器</strong></h3>
+
+<p>你需要使用 {{DOMxRef("EventTarget.addEventListener()")}} 去添加 <code>change</code> 事件监听器，像这样：</p>
+
+<pre class="brush: js notranslate">const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* now you can work with the file list */
+}
+</pre>
+
+<p>注意在这个例子里，<code>handleFiles()</code> 方法本身是一个事件处理器，不像之前的例子中，它被事件处理器调用然后传递给它一个参数。</p>
+
+<h2 id="获取被选择文件的信息">获取被选择文件的信息</h2>
+
+<p>DOM 提供 {{ domxref("FileList") }} 对象列出了用户选择的所有文件，每一个文件被指定为一个 {{ domxref("File") }} 对象。你可以通过检查文件列表 {{ domxref("FileList") }} 的 <code>length</code> 属性来确定用户选择了多少个文件：</p>
+
+<pre class="brush: js notranslate">const numFiles = files.length;
+</pre>
+
+<p>可以像数组一样简单地访问文件列表来检索各个 {{ domxref("File") }} 对象：</p>
+
+<pre class="brush: js notranslate">for (let i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  const file = files[i];
+  // ...
+}</pre>
+
+<p>这个循环遍历了文件列表里的所有文件。</p>
+
+<p> {{ domxref("File") }} 对象提供了三个属性，包含了文件的有用信息。</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>文件名称，只读字符串。只包含文件名，不包含任何路径信息。</dd>
+ <dt><code>size</code></dt>
+ <dd>以字节数为单位的文件大小，只读的64位整数。</dd>
+ <dt><code>type</code></dt>
+ <dd>文件的 MIME 类型，只读字符串，当类型不能确定时为 <code>""</code>。</dd>
+</dl>
+
+<h3 id="示例：显示文件大小">示例：显示文件大小</h3>
+
+<p>下面的例子展示了 <code>size</code> 属性的一种可能用法：</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  let nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (let nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  let sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  for (nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize()"&gt;
+  &lt;form name="uploadForm"&gt;
+    &lt;div&gt;
+      &lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt;
+      selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;;
+      total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;&lt;input type="submit" value="Send file"&gt;&lt;/div&gt;
+  &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="通过_click_方法使用隐藏的_file_input_元素">通过 click() 方法使用隐藏的 file input 元素</h2>
+
+<p>你可以隐藏公认难看的 file {{ HTMLElement("input") }} 元素并显示你自己的界面来打开文件选择器，然后显示哪个或哪些文件被用户选中了。你可以通过给 input 元素添加 <code>display:none</code> 的样式，再调用 {{HTMLElement("input") }} 元素的 {{domxref("element.click","click()") }} 方法来实现。</p>
+
+<p>考虑这段HTML：</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;button id="fileSelect"&gt;Select some files&lt;/button&gt;
+</pre>
+
+<p>处理 <code>click</code> 事件的代码类似于这样：</p>
+
+<pre class="brush: js notranslate">const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+</pre>
+
+<p>你可以给这个用来打开文件选择器的新按钮添加任何你想要的样式。</p>
+
+<h2 id="使用_label_元素来触发一个隐藏的_file_input_元素">使用 label 元素来触发一个隐藏的 file input 元素</h2>
+
+<p>允许在不使用 JavaScript（click() 方法）来打开文件选择器，可以使用 {{ HTMLElement("label") }} 元素。注意在这种情况下，input 元素不能使用 <code>display: none</code>（或 <code>visibility: hidden</code>）隐藏，否则 label 将无法通过键盘访问。使用 <a href="https://a11yproject.com/posts/how-to-hide-content/">visually-hidden technique</a> 作为替代。</p>
+
+<p>考虑这段HTML：</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"&gt;
+&lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+
+<p>和这段CSS：</p>
+
+<pre class="brush: css notranslate">.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+</pre>
+
+<p>这里不需要添加任何 JavaScript 代码来调用<code>fileElem.click()</code>，另外，这时你也可以给 label 元素添加你想要的样式。您需要在其 label 上提供隐藏 input 字段的焦点状态的视觉提示，比如上面用的轮廓，或者背景颜色或边框阴影。（截至编写时为止，Firefox 不显示 <code>&lt;input type="file"&gt;</code> 元素的视觉提示。）</p>
+
+<h2 id="使用拖放来选择文件">使用拖放来选择文件</h2>
+
+<p>你还可以让用户将文件拖拽到你的网页应用中。</p>
+
+<p>第一步是创建一个drop区域。虽然你网页内容的哪部分接受拖放取决于你的应用设计，但是使一个元素接收drop事件是很容易的。</p>
+
+<pre class="brush: js notranslate">let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+</pre>
+
+<p>在这个例子中，我们将ID为<code>dropbox</code>的元素变为了我们的drop区域。这是通过给元素添加{{event('dragenter')}}, {{event('dragover')}}, 和{{event('drop')}} 事件监听器实现的。</p>
+
+<p>我们其实并不需要对<code>dragenter</code> and <code>dragover</code> 事件进行处理，所以这些函数都很简单。他们只需要包括禁止事件传播和阻止默认事件：</p>
+
+<pre class="brush: js notranslate">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+</pre>
+
+<p>真正的奥妙在<code>drop()</code>这个函数中：</p>
+
+<pre class="brush: js notranslate">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>这里，我们从事件中获取到了<code>dataTransfer</code> 这个域，然后从中得到文件列表，再将它们传递给<code>handleFiles()</code>函数。在这之后，处理文件的方法和用<code>input</code>元素或者用拖拽就是一样的了。</p>
+
+<h2 id="例子：显示用户选择的图片的缩略图">例子：显示用户选择的图片的缩略图</h2>
+
+<p>比方说，你正在开发一个炫酷的下一代图片分享网站，并且想使用HTML5来展示用户在实际上传之前的图片的缩略图。你可以像我们之前讨论的那样创建自己的input元素或者drop区域，然后对他们使用一个回调函数，比如下面的<code>handleFiles()</code>。</p>
+
+<pre class="brush: js notranslate">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // 假设"preview"就是用来显示内容的div
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>这里我们循环处理用户选择的文件，看每个文件的<code>type</code>属性是不是image（通过正则表达式来匹配MIME类型字符串模式"<code>image/*</code>"）。 对每个文件而言，如果它是image，我们就创建一个新的<code>img</code>元素。可以使用css来创建一个漂亮的边框或阴影来显示图片的具体大小，在这儿就不具体做了。</p>
+
+<p>为了在DOM树中更容易地找到他们，每个图片元素都被添加了一个名为<code>obj</code>的CSS类。我们还给每个图片添加了<code>file</code>属性使它具有 {{ domxref("File") }}；这样做可以让我们拿到稍后需要实际上传的图片。我们在预览页中使用 {{ domxref("Node.appendChild()") }}来添加新的缩略图。</p>
+
+<p>接下来，我们创建了{{ domxref("FileReader") }}来处理异步的图片加载并把他赋给<code>img</code>元素。在创建一个新的 <code>FileReader</code>对象后，我们新建了它的<code>onload</code> 函数，然后调用<code>readAsDataURL()</code>函数开始后台读取文件。当整个图片文件的内容都被全部加载完后，它们被转换成了一个被传递到<code>onload</code>回调函数的<code>data:</code>URL。我们再执行常规操作将<code>img</code>元素的<code>src</code>属性设置为刚刚加载完毕的URL，使得图像可以显示在用户屏幕上的缩略图中。</p>
+
+<h2 id="使用对象_URL">使用对象 URL</h2>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }}引入了对DOM {{ domxref("window.URL.createObjectURL()") }} 和 {{ domxref("window.URL.revokeObjectURL()") }} 方法的支持。这使得你可以创建用于引用任何数据的简单URL字符串，也可以引用一个包括用户电脑上的本地文件的DOM {{ domxref("File") }}对象。</p>
+
+<p>当你需要在HTML中通过URL来引用一个{{ domxref("File") }}对象时，你可以创建一个对象URL，就像这样：</p>
+
+<pre class="brush: js notranslate">var objectURL = window.URL.createObjectURL(fileObj);
+</pre>
+
+<p>这个对象URL是一个标识{{ domxref("File") }}对象的字符串。每次你调用{{ domxref("window.URL.createObjectURL()") }}，就会产生一个唯一的对象URL，即使是你对一个已创建了对象URL的文件再次创建一个对象URL。每个创建了的对象URL必须要释放。当文档关闭时，它们会自动被释放。如果你的网页要动态使用它们，你需要显式调用 {{ domxref("window.URL.revokeObjectURL()") }}来释放它们：</p>
+
+<pre class="brush: js notranslate">window.URL.revokeObjectURL(objectURL);
+</pre>
+
+<h2 id="示例：使用对象URL来显示图片">示例：使用对象URL来显示图片</h2>
+
+<p>这个例子使用对象URL来显示图片缩略图。另外，示例也会显示文件名和文件大小等其他文件信息。</p>
+
+<p>显示接口的HTML类似于这样：</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;No files selected!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>这确定我们的文件 {{ HTMLElement("input") }} 元素显示为一个可以调用文件选择器的链接（我们隐藏了文件输入元素来阻止显示用户不友好的界面）。这个在 {{ anch("Using hidden file input elements using the click() method") }}节已经说明了这种调用文件选择器的方法。</p>
+
+<p><code>handleFiles()</code> 方法如下：</p>
+
+<pre class="brush: js notranslate">window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+    if (fileElem) {
+        fileElem.click();
+    }
+    e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+    if (!files.length) {
+        fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+    } else {
+        fileList.innerHTML = "";
+        var list = document.createElement("ul");
+        fileList.appendChild(list);
+        for (var i = 0; i &lt; files.length; i++) {
+            var li = document.createElement("li");
+            list.appendChild(li);
+            var img = document.createElement("img");
+            img.src = window.URL.createObjectURL(files[i]);
+            img.height = 60;
+            img.onload = function () {
+                window.URL.revokeObjectURL(this.src);
+            }
+            li.appendChild(img);
+            var info = document.createElement("span");
+            info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+            li.appendChild(info);
+        }
+    }
+}</pre>
+
+<p>首先，获取ID为 <code>fileList</code> 的 {{ HTMLElement("div") }} 。这个区块里我们会插入我们的文件列表，包括缩略图。</p>
+
+<p>如果传入 <code>handleFiles()</code> 的 {{ domxref("FileList") }} 对象值为 <code>null</code> 时，我们只要简单将这块的内部HTML为显示“No files selected!”。否则，我们就需要像下面这样编写我们的文件列表：</p>
+
+<ol>
+ <li><span>创建一个无序列表 ({{ HTMLElement("ul") }}) 元素。</span></li>
+ <li>通过调用列表的{{ domxref("Node.appendChild()") }}方法来将新的列表元素插入到 {{ HTMLElement("div") }}块。</li>
+ <li>遍历文件集合 {{ domxref("FileList") }}（即<code>files</code>）中的每个 {{ domxref("File") }}：
+  <ol>
+   <li>创建一个新的列表项（{{ HTMLElement("li") }}）元素并插入到列表中。</li>
+   <li>创建一个新的图片（{{ HTMLElement("img") }}）元素。</li>
+   <li>设置图片的源为一个新的指代文件的对象URL，使用{{ domxref("window.URL.createObjectURL()") }}来创建blob URL。</li>
+   <li>设置图片的高度为60像素。</li>
+   <li>设置图片的load事件处理器来释放对象URL，当图片加载完成之后对象URL就不再需要了。这个可以通过调用{{ domxref("window.URL.revokeObjectURL()") }}方法并且传递 <code>img.src</code>中的对象URL字符串来实现。</li>
+   <li>将新的列表项添加到列表中。</li>
+  </ol>
+ </li>
+</ol>
+
+<p>这是上面代码的一个在线示例：</p>
+
+<p>{{EmbedLiveSample('示例：使用对象URL来显示图片', '100%', '300px')}}</p>
+
+<h2 id="例子：上传一个用户选择的文件">例子：上传一个用户选择的文件</h2>
+
+<p>另一件您可能想要做的事是让用户将选定的一个或多个文件（例如前一个示例中选择的图像）上传到服务器。这用异步可以很容易地完成。</p>
+
+<h3 id="创建上传任务">创建上传任务</h3>
+
+<p>继续前面示例中构建缩略图的代码，回想一下每个缩略图图像都在CSS类<code>obj</code>中，并且<code>file</code>属性中附加了相应的 {{ domxref("File") }} 。这允许我们使用 {{ domxref("Document.querySelectorAll()") }} 选择用户决定上传的所有图像，如下所示：</p>
+
+<pre class="brush: js notranslate">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>第2行获取了文档中所有CSS类为<code>obj</code>的元素的 <span style="line-height: 1.5;">{{ domxref("NodeList") }}</span>，命名为<code>imgs</code>。在我们的例子中，这些是包含所有图像缩略图的列表。有了这个列表，遍历并为每一项创建一个新的<code>FileUpload</code>实例就很简单了。每个实例都可以处理相应文件的上传。</p>
+
+<h3 id="Handling_the_upload_process_for_a_file处理文件的上传过程">Handling the upload process for a file处理文件的上传过程</h3>
+
+<p><code>FileUpload</code>函数接受两个输入：一个image元素和一个包含图像数据的文件。</p>
+
+<pre class="brush: js notranslate">function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>上面的<code>FileUpload()</code> 函数创建了一个“加载中”指示器，用于显示进度信息，然后创建了一个 {{ domxref("XMLHttpRequest") }} 来处理上传数据。</p>
+
+<p>实际传输数据前，采取了几道准备步骤：</p>
+
+<ol>
+ <li><code>XMLHttpRequest</code>的<code>progress</code>监听器被设为将加载指示器更新为新的百分比信息，这样随着上传进行，指示器会显示最新的信息。</li>
+ <li><code>XMLHttpRequest</code>的<code>load</code>事件监听器被设为将加载指示器的进度信息更新为100%，以保证进度显示确实达到了100%（以防在上传过程中出现粒度误差）。然后它移除了已经不再需要的加载指示器。这样上传一完成指示器就会消失。</li>
+ <li>上传图像文件的请求，是由调用<code>XMLHttpRequest</code>的<code>open()</code>函数发送POST请求完成的。</li>
+ <li>上传的MIME类型是通过调用<code>XMLHttpRequest</code>的<code>overrideMimeType()</code>函数来设置的。这个例子中，我们使用通用MIME类型。是否需要设置MIME类型取决于你的具体使用情况。</li>
+ <li><code>FileReader</code>对象用于将文件转换为二进制字符串。</li>
+ <li>最后，当内容被加载时，会调用<code>XMLHttpRequest</code>的<code>send()</code>函数来上传文件内容。</li>
+</ol>
+
+<div class="note"><strong>提示：</strong>上面例子中使用的非标准的<code>sendAsBinary</code>方法在Gecko 31 {{ geckoRelease(31) }} 中已废弃。请使用标准的<code>send(Blob data)</code>方法代替。</div>
+
+<h3 id="异步处理文件上传">异步处理文件上传</h3>
+
+<p>这个例子演示了如何异步上传文件，在服务器端使用了php、在客户端使用了JavaScript。</p>
+
+<pre class="brush: js notranslate">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="application/javascript"&gt;
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="例子：用对象URL显示PDF">例子：用对象URL显示PDF</h2>
+
+<p>对象URL可以用于image之外的其它东西！它可以用于显示嵌入的PDF文件或任何其它浏览器能显示的资源。</p>
+
+<p>在Firefox中，要让PDF嵌入式地显示在iframe中（而不是作为下载的文件弹出），必须将<code>pdfjs.disabled</code>设为<code>false</code> {{non-standard_inline()}}.</p>
+
+<pre class="brush: html notranslate">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>这是<code>src</code>属性的改动：</p>
+
+<pre class="brush: js notranslate">const obj_url = window.URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+</pre>
+
+<h2 id="例子：将对象URL用于其它文件类型">例子：将对象URL用于其它文件类型</h2>
+
+<p>你可以用同样方式操作其它格式的文件。这是预览上传的视频的方法：</p>
+
+<pre class="brush: js notranslate">const video = document.getElementById('video');
+const obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);</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('HTML WHATWG', 'number-state.html#concept-input-type-file-selected', 'File upload state')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{DOMxRef("File")}}</li>
+ <li>{{DOMxRef("FileList")}}</li>
+ <li>{{DOMxRef("FileReader")}}</li>
+ <li>{{DOMxRef("URL")}}</li>
+ <li>{{DOMxRef("XMLHttpRequest")}}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/file/webkitrelativepath/index.html b/files/zh-cn/web/api/file/webkitrelativepath/index.html
new file mode 100644
index 0000000000..e8e86bc53c
--- /dev/null
+++ b/files/zh-cn/web/api/file/webkitrelativepath/index.html
@@ -0,0 +1,126 @@
+---
+title: File.webkitRelativePath
+slug: Web/API/File/webkitRelativePath
+translation_of: Web/API/File/webkitRelativePath
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p><code><strong>File.webkitRelativePath</strong></code> 是只读属性，包含 {{domxref("USVString")}}，它规定了文件的路径，相对于用户在 {{HTMLElement("input")}} 元素中选择的目录，这个元素设置了 {{htmlattrxref("webkitdirectory", "input")}} 属性。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"> <code><em>relativePath = File</em></code>.webkitRelativePath</pre>
+
+<h3 id="值">值</h3>
+
+<p>{{domxref("USVString")}} 包含文件路径，相对于用户所选的祖先目录。</p>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<p>这个示例展示了目录选择器，它让用户选择一个或多个目录。{{event("change")}} 事件触发时，所选目录包含的所有文件的列表，会生成并展示，带有所选目录的层次结构。</p>
+
+<h3 id="HTML_内容">HTML 内容</h3>
+
+<pre class="brush: html">&lt;input type="file" id="filepicker" name="fileList" webkitdirectory multiple /&gt;
+&lt;ul id="listing"&gt;&lt;/ul&gt;</pre>
+
+<h3 id="JavaScript_内容">JavaScript 内容</h3>
+
+<pre class="brush: js">document.getElementById("filepicker").addEventListener("change", function(event) {
+  let output = document.getElementById("listing");
+  let files = event.target.files;
+
+  for (let i=0; i&lt;files.length; i++) {
+    let item = document.createElement("li");
+    item.innerHTML = files[i].webkitRelativePath;
+    output.appendChild(item);
+  };
+}, false);
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<p>特别提醒：假设文件路径是 C:\f1\f2\f3\file.txt, 用户选择的是f1 文件夹，则Chrome、Firefox、Edge 都能正确返回  f2/f3/file.txt值。而国产的QQ浏览器、360浏览器、UC浏览器、搜狗浏览器都只能返回 f3/file.txt。也就是国产浏览器调用webkitRelativePath返回的结果都不会是你希望得到的路径，请注意使用时的细微差距。</p>
+
+<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 System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}</td>
+   <td>{{ Spec2('File System API') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>这个 API 没有官方的 W3C 或者 WHATWG 规范。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoDesktop(49) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>0.16 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile(49) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">文件和目录条目 API</a></li>
+ <li>{{domxref("HTMLInputElement.webkitEntries")}}</li>
+ <li>{{domxref("HTMLInputElement.webkitdirectory")}}</li>
+</ul>