initial commit

6 files changed, 679 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/datatransferitem/getasfile/index.html b/files/zh-cn/web/api/datatransferitem/getasfile/index.html
new file mode 100644
index 0000000000..c1f1326629
--- /dev/null
+++ b/files/zh-cn/web/api/datatransferitem/getasfile/index.html
@@ -0,0 +1,94 @@
+---
+title: DataTransferItem.getAsFile()
+slug: Web/API/DataTransferItem/getAsFile
+tags:
+  - API
+  - DataTransferItem
+translation_of: Web/API/DataTransferItem/getAsFile
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>如果<strong><code>DataTransferItem</code></strong>是一个文件, 那 <strong><code>DataTransferItem.getAsFile()</code></strong>  方法将返回拖拽项数据的 {{domxref("File")}} 对象. 如果拖拽项的数据不是一个文件，则返回 <code>null</code>.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>File</em> = <em>DataTransferItem</em>.getAsFile();
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<p><em>无.</em></p>
+
+<h3 id="返回值">返回值</h3>
+
+<dl>
+ <dt>{{domxref("File")}}</dt>
+ <dd>如果拖拽项的对象是一个文件, 则返回 {{domxref("File")}} 对象; 否则返回 <code>null</code> .</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>下面这个例子中使用 <code>getAsFile()</code> 。放在 {{event("drop")}} 事件处理里面.</p>
+
+<pre class="brush: js">function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = event.dataTransfer.items;
+ for (var i = 0; i &lt; data.length; i += 1) {
+   if ((data[i].kind == 'string') &amp;&amp;
+       (data[i].type.match('^text/plain'))) {
+     // 遍历拖拽项的内容
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/html'))) {
+     // 拖拽项的数据是 HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/uri-list'))) {
+     // 拖拽项的数据是URI
+     console.log("... Drop: URI");
+   } else if ((data[i].kind == 'file') &amp;&amp;
+              (data[i].type.match('^image/'))) {
+     // 拖拽项的数据是一个图片
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+</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('HTML WHATWG', 'interaction.html#dom-datatransferitem-getasfile','getAsFile()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial value</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-getasfile','getAsFile()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of the HTML WHATWG document</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+
+
+<p>{{Compat("api.DataTransferItem.getAsFile")}}</p>
+
+<h2 id="查看更多">查看更多</h2>
+
+<ul>
+ <li>{{domxref("DataTransfer.files()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/datatransferitem/getasstring/index.html b/files/zh-cn/web/api/datatransferitem/getasstring/index.html
new file mode 100644
index 0000000000..3b8147f7f6
--- /dev/null
+++ b/files/zh-cn/web/api/datatransferitem/getasstring/index.html
@@ -0,0 +1,102 @@
+---
+title: DataTransferItem.getAsString()
+slug: Web/API/DataTransferItem/getAsString
+translation_of: Web/API/DataTransferItem/getAsString
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p> <strong><code>DataTransferItem.getAsString()</code></strong>  当DataTransferItem对象的kind属性是一个普通Unicode字符串时，该方法会用 DataTransferItem对象的kind属性作为入参来执行传入的回调函数 (i.e. <code>kind</code> is <code>string</code>).</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="syntaxbox notranslate"><em>dataTransferItem</em>.getAsString(callback);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>A callback function that has access to the {{domxref("DataTransferItem","data transfer item's")}} string data. See {{anch("Callback")}} below for details.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Callback">Callback</h2>
+
+<p>The callback parameter is a callback function which accepts one parameter:</p>
+
+<dl>
+ <dt>{{domxref("DOMString")}}</dt>
+ <dd>The drag data item's string data.</dd>
+</dl>
+
+<p>The callback return value is <code>undefined</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This example shows the use of the <code>getAsString()</code> method as an <em>inline function</em> in a {{event("drop")}} event handler.</p>
+
+<pre class="brush: js notranslate">function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.items;
+ for (var i = 0; i &lt; data.length; i += 1) {
+   if ((data[i].kind == 'string') &amp;&amp;
+       (data[i].type.match('^text/plain'))) {
+     // This item is the target node
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/html'))) {
+     // Drag data item is HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/uri-list'))) {
+     // Drag data item is URI
+     console.log("... Drop: URI");
+   } else if ((data[i].kind == 'file') &amp;&amp;
+              (data[i].type.match('^image/'))) {
+     // Drag data item is an image file
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</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('HTML WHATWG', 'interaction.html#dom-datatransferitem-getasstring','getAsString()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-getasstring','getAsString()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot fo HTML WHATWG document</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DataTransferItem.getAsString")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DataTransfer.getData()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/datatransferitem/index.html b/files/zh-cn/web/api/datatransferitem/index.html
new file mode 100644
index 0000000000..1f05ea0fb9
--- /dev/null
+++ b/files/zh-cn/web/api/datatransferitem/index.html
@@ -0,0 +1,121 @@
+---
+title: DataTransferItem
+slug: Web/API/DataTransferItem
+translation_of: Web/API/DataTransferItem
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><code><strong>DataTransferItem</strong></code> 描述了一个拖拽项。在一个拖拽操作<em>中，</em>每一个 {{domxref("DragEvent","drag event")}} 都有一个{{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性，它包含一个存有拖拽数据的 {{domxref("DataTransferItemList","list")}} ，其中每一项都是一个 <code>DataTransferItem</code> 。</p>
+
+<p>这个接口没有构造函数。</p>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{domxref("DataTransferItem.kind")}} {{readonlyInline}}</dt>
+ <dd>拖拽项的种类，<code>string</code> 或是 <code>file。</code></dd>
+ <dt>{{domxref("DataTransferItem.type")}} {{readonlyInline}}</dt>
+ <dd>拖拽项的类型，一般是一个MIME 类型.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("DataTransferItem.getAsFile()")}}</dt>
+ <dd>返回一个关联拖拽项的 {{domxref("File")}} 对象 （当拖拽项不是一个文件时返回 null）。</dd>
+ <dt>{{domxref("DataTransferItem.getAsString()")}}</dt>
+ <dd>使用拖拽项的字符串作为参数执行指定回调函数。</dd>
+ <dt>{{domxref("DataTransferItem.webkitGetAsEntry()")}} {{Non-standard_inline}}</dt>
+ <dd>返回一个基于 {{domxref("FileSystemEntry")}} 的对象来表示文件系统中选中的项目。通常是返回一个{{domxref("FileSystemFileEntry")}} 或是 {{domxref("FileSystemDirectoryEntry")}} 对象.</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<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('HTML WHATWG', 'interaction.html#datatransferitem','DataTransferItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初始定义</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#datatransferitem','DataTransferItem')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>W3C snapshot of WHATWG</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('File System API', '#dom-datatransferitem-webkitgetasentry', 'DataTransferItem.webkitGetAsEntry()')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a> 中定义了<code>webkitGetAsEntry()</code></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>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12</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>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/api/datatransferitem/kind/index.html b/files/zh-cn/web/api/datatransferitem/kind/index.html
new file mode 100644
index 0000000000..e475661971
--- /dev/null
+++ b/files/zh-cn/web/api/datatransferitem/kind/index.html
@@ -0,0 +1,96 @@
+---
+title: DataTransferItem.kind
+slug: Web/API/DataTransferItem/kind
+tags:
+  - API
+  - DataTransferItem
+  - HTML DOM
+  - HTML Drag and Drop API
+  - Property
+  - Reference
+  - drag and drop
+  - kind
+translation_of: Web/API/DataTransferItem/kind
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><strong><code>DataTransferItem.kind</code></strong> 是一个只读属性，它返回一个 {{domxref("DataTransferItem")}} 用来表示拖拽项(<em>drag data item)的类型</em>: 一些文本或者一些文件。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>itemKind</em> = <em>DataTransferItem</em>.kind;
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p> {{domxref("DOMString")}} 用来表示拖拽项(<em>drag data item)的类型</em>. 它的值必须是以下值中的一个:</p>
+
+<dl>
+ <dt><code>'file'</code></dt>
+ <dd>拖拽项是一个文件。</dd>
+ <dt><code>'string'</code></dt>
+ <dd>拖拽项是一个普通的 Unicode 字符。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>下面这个例子是 <code>kind</code> 属性的用法.</p>
+
+<pre class="brush: js">function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = event.dataTransfer.items;
+ for (var i = 0; i &lt; data.length; i += 1) {
+   if ((data[i].kind == 'string') &amp;&amp;
+       (data[i].type.match('^text/plain'))) {
+     // This item is the target node
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/html'))) {
+     // Drag data item is HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'file') &amp;&amp;
+              (data[i].type.match('^image/'))) {
+     // Drag data item is an image file
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+</pre>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>规范</strong></span></font></p>
+
+<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('HTML WHATWG', 'interaction.html#dom-datatransferitem-kind','kind')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial version</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-kind','kind')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>W3C snapshot of the WHATWG document.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>浏览器兼容性</strong></span></font></p>
+
+
+
+<p>{{Compat("api.DataTransferItem.kind")}}</p>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>查看更多</strong></span></font></p>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
+
+<p> </p>
diff --git a/files/zh-cn/web/api/datatransferitem/type/index.html b/files/zh-cn/web/api/datatransferitem/type/index.html
new file mode 100644
index 0000000000..10acc277d1
--- /dev/null
+++ b/files/zh-cn/web/api/datatransferitem/type/index.html
@@ -0,0 +1,87 @@
+---
+title: DataTransferItem.type
+slug: Web/API/DataTransferItem/type
+translation_of: Web/API/DataTransferItem/type
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>只读属性<strong><code>DataTransferItem.type</code></strong> 返回代表拖动数据项的 {{domxref("DataTransferItem")}} 对象的类型（格式）。  <code>type</code> 是一个Unicode字符串，通常由MIME给出，不过不需要MIME类型。</p>
+
+<p>举例一些类型: <code>text/plain</code> 和 <code>text/html</code>.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>dataItem</em>.type;
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个代表拖动数据项类型的 {{domxref("DOMString")}}。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>这个例子演示了<code>type</code> 属性的用法。</p>
+
+<pre class="brush: js">function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.items;
+ for (var i = 0; i &lt; data.length; i += 1) {
+   if ((data[i].kind == 'string') &amp;&amp;
+       (data[i].type.match('^text/plain'))) {
+     // This item is the target node
+     data[i].getAsString(function (s){
+       ev.target.appendChild(document.getElementById(s));
+     });
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/html'))) {
+     // Drag data item is HTML
+     console.log("... Drop: HTML");
+   } else if ((data[i].kind == 'string') &amp;&amp;
+              (data[i].type.match('^text/uri-list'))) {
+     // Drag data item is URI
+     console.log("... Drop: URI");
+   } else if ((data[i].kind == 'file') &amp;&amp;
+              (data[i].type.match('^image/'))) {
+     // Drag data item is an image file
+     var f = data[i].getAsFile();
+     console.log("... Drop: File ");
+   }
+ }
+}
+</pre>
+
+<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('HTML WHATWG', 'interaction.html#dom-datatransferitem-type','type')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial version</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransferitem-type','type')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of the HTML WHATWG document</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DataTransferItem.type")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li>{{domxref("DataTransfer.type()")}}</li>
+ <li><a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME类型不完整列表</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html
new file mode 100644
index 0000000000..dc0cb8a184
--- /dev/null
+++ b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html
@@ -0,0 +1,179 @@
+---
+title: DataTransferItem.webkitGetAsEntry()
+slug: Web/API/DataTransferItem/webkitGetAsEntry
+translation_of: Web/API/DataTransferItem/webkitGetAsEntry
+---
+<p><font><font>如果由文件描述的项目</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem" title="DataTransferItem对象表示一个拖动数据项。 在拖动操作期间，每个拖动事件都有一个dataTransfer属性，该属性包含拖动数据项列表。 列表中的每个项目都是DataTransferItem对象。"><code>DataTransferItem</code></a><font><font>是文件，则</font></font><code>webkitGetAsEntry()</code><font><font>返回</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry" title="File System API的FileSystemFileEntry接口表示文件系统中的文件。 它提供了描述文件属性的属性，以及file()方法，该方法创建了一个可用于读取文件的File对象。"><code>FileSystemFileEntry</code></a><font><font>或</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry" title="File和Directory Entries API的FileSystemDirectoryEntry接口表示文件系统中的目录。 它提供的方法可以访问和操作目录中的文件，以及访问目录中的条目。"><code>FileSystemDirectoryEntry</code></a><font><font>表示它。</font><font>如果该项不是文件，</font></font><code>null</code><font><font>则返回。</font></font></p>
+
+<div class="note">
+<p><font><font>此功能</font></font><code>webkitGetAsEntry()</code><font><font>在此时非包含Firefox的非WebKit浏览器中</font><font>实现</font><font>; </font><font>它可能会</font></font><code>getAsEntry()</code><font><font>在以后</font><font>简单地重命名</font><font>，所以你应该进行防御性编码，寻找两者。</font></font></p>
+</div>
+
+<h2 id="语法"><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry#Syntax"><font><font>语法</font></font></a></h2>
+
+<pre class="syntaxbox"><em><font><font>DataTransferItem</font></font></em><font><font>.webkitGetAsEntry();</font></font></pre>
+
+<h3 class="syntaxbox" id="参数"><font><font>参数</font></font></h3>
+
+<p><font><font>没有。</font></font></p>
+
+<h3 id="返回值"><font><font>返回值</font></font></h3>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry" title="File和Directory Entries API的FileSystemEntry接口表示文件系统中的单个。 该条目可以是文件或目录（目录由DirectoryEntry接口表示）。 它包括处理文件的方法 - 包括复制，移动，删除和读取文件 - 以及它指向的文件的信息 - 包括文件名及其从根到条目的路径。"><code>FileSystemEntry</code></a><font><font>基于</font><font>A </font><font>的对象描述被删除的项目。</font><font>这将是</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry" title="File System API的FileSystemFileEntry接口表示文件系统中的文件。 它提供了描述文件属性的属性，以及file()方法，该方法创建了一个可用于读取文件的File对象。"><code>FileSystemFileEntry</code></a><font><font>或</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry" title="File和Directory Entries API的FileSystemDirectoryEntry接口表示文件系统中的目录。 它提供的方法可以访问和操作目录中的文件，以及访问目录中的条目。"><code>FileSystemDirectoryEntry</code></a><font><font>。</font></font></p>
+
+<h2 id="Example" name="Example"><font><font>示例</font></font></h2>
+
+<p><font><font>在此示例中，创建了一个放置区域，该放置区域</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/drop" title="/en-US/docs/Web/Events/drop">drop</a></code><font><font>通过扫描已删除的文件和目录</font><font>来响应</font><font>事件</font><font>，从而</font><font>输出分层目录列表。</font></font></p>
+
+<h3 id="HTML内容"><font><font>HTML内容</font></font></h3>
+
+<p><font><font>HTML建立了放置区本身，它是</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" title="HTML Content Division元素（&lt;div>）是流内容的通用容器。 在使用CSS设置样式之前，它对内容或布局没有影响。"><code>&lt;div&gt;</code></a><font><font>具有ID </font><font>的</font><font>元素</font></font><code>"dropzone"</code><font><font>，以及</font><font>带有ID </font><font>的无序列表元素</font></font><code>"listing"</code><font><font>。</font></font></p>
+
+<pre><code>&lt;p&gt;Drag files and/or directories to the box below!&lt;/p&gt;
+
+&lt;div id="dropzone"&gt;
+  &lt;div id="boxtitle"&gt;
+    Drop Files Here
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Directory tree:&lt;/h2&gt;
+
+&lt;ul id="listing"&gt;
+&lt;/ul&gt;</code></pre>
+
+<h3 id="CSS内容"><font><font>CSS内容</font></font></h3>
+
+<p><font><font>此处显示示例使用的样式。</font></font></p>
+
+<pre><code>#dropzone {
+  text-align: center;
+  width: 300px;
+  height: 100px;
+  margin: 10px;
+  padding: 10px;
+  border: 4px dashed red;
+  border-radius: 10px;
+}
+
+#boxtitle {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  color: black;
+  font: bold 2em "Arial", sans-serif;
+  width: 300px;
+  height: 100px;
+}
+
+body {
+  font: 14px "Arial", sans-serif;
+}</code></pre>
+
+<h3 id="JavaScript内容"><font><font>JavaScript内容</font></font></h3>
+
+<p><font><font>首先，让我们看一下递归</font></font><code>scanFiles()</code><font><font>函数。</font><font>该函数将</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry" title="File和Directory Entries API的FileSystemEntry接口表示文件系统中的单个。 该条目可以是文件或目录（目录由DirectoryEntry接口表示）。 它包括处理文件的方法 - 包括复制，移动，删除和读取文件 - 以及它指向的文件的信息 - 包括文件名及其从根到条目的路径。"><code>FileSystemEntry</code></a><font><font>表示要扫描和处理的文件系统中的条目（</font></font><code>item</code><font><font>参数）和插入内容列表（</font></font><code>container</code><font><font>参数）</font><font>的元素</font><font>作为输入</font><font>。</font></font></p>
+
+<div class="blockIndicator note">
+<p><font><font>请注意，要读取目录中的所有文件，</font></font><code>readEntries</code><font><font>需要重复调​​用，直到它返回一个空数组。</font><font>在基于Chromium的浏览器中，以下示例仅返回最多100个条目。</font></font></p>
+</div>
+
+<pre class="brush: js">let dropzone = document.getElementById("dropzone");
+let listing = document.getElementById("listing");
+
+function scanFiles(item, container) {
+  let elem = document.createElement("li");
+  elem.innerHTML = item.name;
+  container.appendChild(elem);
+
+ if (item.isDirectory) {
+    let directoryReader = item.createReader();
+    let directoryContainer = document.createElement("ul");
+    container.appendChild(directoryContainer);
+    directoryReader.readEntries(function(entries) {
+        entries.forEach(function(entry) {
+          scanFiles(entry, directoryContainer);
+      });
+    });
+  }
+}
+</pre>
+
+<p><code>scanFiles()</code><font><font>首先创建一个新</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li" title="HTML &lt;li>元素用于表示列表中的项目。"><code>&lt;li&gt;</code></a><font><font>元素来表示正在扫描的项目，将项目的名称作为文本内容插入其中，然后将其附加到容器中。</font><font>容器在此示例中始终是列表元素，您很快就会看到。</font></font></p>
+
+<p><font><font>一旦当前项目在列表中，</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/isDirectory" title="如果条目表示目录（意味着它是FileSystemDirectoryEntry），则FileSystemEntry接口的只读isDirectory属性为true，如果不是，则为false。"><code>isDirectory</code></a><font><font>就会检查</font><font>项目的</font><font>属性。</font><font>如果该项目是目录，我们需要递归到该目录。</font><font>第一步是创建一个</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader" title="File和Directory Entries API的FileSystemDirectoryReader接口允许您访问表示目录中每个条目的基于FileEntry的对象（通常为FileSystemFileEntry或FileSystemDirectoryEntry）。"><code>FileSystemDirectoryReader</code></a><font><font>to来处理获取目录的内容。</font><font>这是通过调用item的</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader" title="FileSystemDirectoryEntry接口的方法createReader（）返回一个FileSystemDirectoryReader对象，该对象可用于读取目录中的条目。"><code>createReader()</code></a><font><font>方法完成的。</font><font>然后</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul" title="HTML &lt;ul>元素表示无序的项目列表，通常呈现为项目符号列表。"><code>&lt;ul&gt;</code></a><font><font>创建</font><font>一个new </font><font>并将其附加到父列表; </font><font>这将包含列表层次结构中下一级别的目录内容。</font></font></p>
+
+<p><font><font>之后，</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries" title="FileSystemDirectoryReader接口的readEntries（）方法检索正在读取的目录中的目录条目，并将它们以数组形式传递给提供的回调函数。"><code>directoryReader.readEntries()</code></a><font><font>调用读取目录中的所有条目。</font><font>反过来，这些都被传递到递归调用</font></font><code>scanFiles()</code><font><font>以处理它们。</font><font>其中任何文件都只是插入到列表中; </font><font>将任何目录插入到列表中，并在下面添加列表层次结构的新级别，依此类推。</font></font></p>
+
+<p><font><font>然后是事件处理程序。</font><font>首先，我们阻止</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/dragover" title="/en-US/docs/Web/Events/dragover">dragover</a></code><font><font>事件由默认处理程序处理，以便我们的drop区域可以接收drop：</font></font></p>
+
+<pre class="brush: js">dropzone.addEventListener("dragover", function(event) {
+    event.preventDefault();
+}, false);
+</pre>
+
+<p><font><font>当然，关闭所有事件的事件处理程序是事件的处理程序</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/drop" title="/en-US/docs/Web/Events/drop">drop</a></code><font><font>：</font></font></p>
+
+<pre class="brush: js">dropzone.addEventListener("drop", function(event) {
+  let items = event.dataTransfer.items;
+
+  event.preventDefault();
+  listing.innerHTML = "";
+
+  for (let i=0; i&lt;items.length; i++) {
+    let item = items[i].webkitGetAsEntry();
+
+    if (item) {
+        scanFiles(item, listing);
+    }
+  }
+}, false);</pre>
+
+<p><font><font>这将获取</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem" title="DataTransferItem对象表示一个拖动数据项。 在拖动操作期间，每个拖动事件都有一个dataTransfer属性，该属性包含拖动数据项列表。 列表中的每个项目都是DataTransferItem对象。"><code>DataTransferItem</code></a><font><font>表示从中删除的项目</font><font>的</font><font>对象</font><font>列表</font></font><code>event.dataTransfer.items</code><font><font>。</font><font>然后我们打电话</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault" title="Event接口的preventDefault（）方法告诉用户代理，如果事件没有得到明确处理，则不应该像通常那样采取默认操作。"><code>Event.preventDefault()</code></a><font><font>来防止事件在完成后被进一步处理。</font></font></p>
+
+<p><font><font>现在是时候开始构建列表了。</font><font>首先，通过设置</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML" title="Element属性innerHTML获取或设置元素中包含的HTML或XML标记。"><code>listing.innerHTML</code></a><font><font>为空</font><font>来清空列表</font><font>。</font><font>这使我们</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Ul" rel="nofollow" title="关于这方面的文件尚未写入;  请考虑贡献！"><code>ul</code></a><font><font>开始插入目录条目为</font><font>空</font><font>。</font></font></p>
+
+<p><font><font>然后我们遍历已删除项目列表中的项目。</font><font>对于每一个，我们调用它的</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry" title="如果DataTransferItem描述的项是文件，webkitGetAsEntry（）将返回表示它的FileSystemFileEntry或FileSystemDirectoryEntry。 如果该项不是文件，则返回null。"><code>webkitGetAsEntry()</code></a><font><font>方法来获得</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry" title="File和Directory Entries API的FileSystemEntry接口表示文件系统中的单个。 该条目可以是文件或目录（目录由DirectoryEntry接口表示）。 它包括处理文件的方法 - 包括复制，移动，删除和读取文件 - 以及它指向的文件的信息 - 包括文件名及其从根到条目的路径。"><code>FileSystemEntry</code></a><font><font>表示文件。</font><font>如果成功，我们会调用</font></font><code>scanFiles()</code><font><font>处理项目 - 如果它只是一个文件，或者添加它，如果它是一个目录，则将其添加到列表中。</font></font></p>
+
+<h3 id="结果"><font><font>结果</font></font></h3>
+
+<p>你可以通过下面的尝试看看它是如何工作的。 找到一些文件和目录并将其拖入，然后查看生成的输出。</p>
+
+<p>{{ EmbedLiveSample('Example', 600, 400) }}</p>
+
+<h2 id="Specifications">Specifications</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-datatransferitem-webkitgetasentry", "webkitGetAsEntry()") }}</td>
+   <td>{{ Spec2("File System API") }}</td>
+   <td><font><font>初始规格。</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><font><font>此API没有官方的W3C或WHATWG规范。</font></font></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><font><font>浏览器兼容性</font></font></h2>
+
+<div class="hidden"><font><font>此页面上的兼容性表是根据结构化数据生成的。</font><font>如果您想为数据做出贡献，请查看</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>并向我们​​发送拉取请求。</font></font></div>
+
+<p><font><font>{{COMPAT("api.DataTransferItem.webkitGetAsEntry")}}</font></font></p>
+
+<h2 id="也可以看看"><font><font>也可以看看</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API"><font><font>文件和目录条目API</font></font></a></li>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction"><font><font>文件系统API简介</font></font></a></li>
+ <li><font><font>{{domxref("DataTransferItem")}}</font></font></li>
+ <li><font><font>{{domxref("FileSystemEntry")}}，{{domxref("FileSystemFileEntry")}}和{{domxref("FileSystemDirectoryEntry")}}</font></font></li>
+ <li><font><font>活动：{{event("dragover")}}和{{event("drop")}}</font></font></li>
+</ul>