path: root/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html

---
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>

<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>