DataTransferItem.webkitGetAsEntry()

翻译不完整。 请帮助我们翻译这篇文章!

如果由文件描述的项目DataTransferItem是文件,则webkitGetAsEntry()返回FileSystemFileEntryFileSystemDirectoryEntry表示它。如果该项不是文件,null则返回。

此功能webkitGetAsEntry()在此时非包含Firefox的非WebKit浏览器中实现; 它可能会getAsEntry()在以后简单地重命名,所以你应该进行防御性编码,寻找两者。

语法

DataTransferItem.webkitGetAsEntry();

参数

没有。

返回值

FileSystemEntry基于的对象描述被删除的项目。这将是FileSystemFileEntryFileSystemDirectoryEntry

示例

在此示例中,创建了一个放置区域,该放置区域drop通过扫描已删除的文件和目录来响应事件,从而输出分层目录列表。

HTML内容

HTML建立了放置区本身,它是<div>具有ID 元素"dropzone",以及带有ID 的无序列表元素"listing"

<p>Drag files and/or directories to the box below!</p>

<div id="dropzone">
  <div id="boxtitle">
    Drop Files Here
  </div>
</div>

<h2>Directory tree:</h2>

<ul id="listing">
</ul>

CSS内容

此处显示示例使用的样式。

#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;
}

JavaScript内容

首先,让我们看一下递归scanFiles()函数。该函数将FileSystemEntry表示要扫描和处理的文件系统中的条目(item参数)和插入内容列表(container参数)的元素作为输入

请注意,要读取目录中的所有文件,readEntries需要重复调​​用,直到它返回一个空数组。在基于Chromium的浏览器中,以下示例仅返回最多100个条目。

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);
      });
    });
  }
}

scanFiles()首先创建一个新<li>元素来表示正在扫描的项目,将项目的名称作为文本内容插入其中,然后将其附加到容器中。容器在此示例中始终是列表元素,您很快就会看到。

一旦当前项目在列表中,isDirectory就会检查项目的属性。如果该项目是目录,我们需要递归到该目录。第一步是创建一个FileSystemDirectoryReaderto来处理获取目录的内容。这是通过调用item的createReader()方法完成的。然后<ul>创建一个new 并将其附加到父列表; 这将包含列表层次结构中下一级别的目录内容。

之后,directoryReader.readEntries()调用读取目录中的所有条目。反过来,这些都被传递到递归调用scanFiles()以处理它们。其中任何文件都只是插入到列表中; 将任何目录插入到列表中,并在下面添加列表层次结构的新级别,依此类推。

然后是事件处理程序。首先,我们阻止dragover事件由默认处理程序处理,以便我们的drop区域可以接收drop:

dropzone.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

当然,关闭所有事件的事件处理程序是事件的处理程序drop

dropzone.addEventListener("drop", function(event) {
  let items = event.dataTransfer.items;

  event.preventDefault();
  listing.innerHTML = "";
 
  for (let i=0; i<items.length; i++) {
    let item = items[i].webkitGetAsEntry();
    
    if (item) {
        scanFiles(item, listing);
    }
  }
}, false);

这将获取DataTransferItem表示从中删除的项目对象列表event.dataTransfer.items然后我们打电话Event.preventDefault()来防止事件在完成后被进一步处理。

现在是时候开始构建列表了。首先,通过设置listing.innerHTML为空来清空列表这使我们ul开始插入目录条目为

然后我们遍历已删除项目列表中的项目。对于每一个,我们调用它的webkitGetAsEntry()方法来获得FileSystemEntry表示文件。如果成功,我们会调用scanFiles()处理项目 - 如果它只是一个文件,或者添加它,如果它是一个目录,则将其添加到列表中。

结果

你可以通过下面的尝试看看它是如何工作的。 找到一些文件和目录并将其拖入,然后查看生成的输出。

Specifications

Specification Status Comment
File and Directory Entries API
webkitGetAsEntry()
Draft 初始规格。

此API没有官方的W3C或WHATWG规范。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
webkitGetAsEntryChrome Full support 13Edge Full support 14Firefox Full support 50IE No support NoOpera No support NoSafari Full support 11.1WebView Android No support NoChrome Android Full support YesFirefox Android Full support 50Opera Android No support NoSafari iOS Full support 11.3Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

也可以看看