FileSystemDirectoryReader.readEntries()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

这是实验性技术
检查浏览器兼容性表格要小心谨慎在生产中使用这之前。

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

FileSystemDirectoryReader 接口的 readEntries() method retrieves the directory entries within the directory being read and delivers them in an array to a provided callback function. The objects in the array are all based upon FileSystemEntry . Generally, they are either FileSystemFileEntry objects, which represent standard files, or FileSystemDirectoryEntry objects, which represent directories.

句法

readEntries(successCallback[, errorCallback]);

参数

successCallback: A function which is called when the directory's contents have been retrieved. The function receives a single input parameter: an array of file system entry objects, each based on FileSystemEntry . Generally, they are either FileSystemFileEntry objects, which represent standard files, or FileSystemDirectoryEntry objects, which represent directories. If there are no files left, or you've already called readEntries() on this FileSystemDirectoryReader , the array is empty.
errorCallback 可选: A callback function which is called if an error occurs while reading from the directory. It receives one input parameter: a FileError object describing the error which occurred.

返回值

undefined .

范例

In this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, outputting a hierarchical directory listing.

HTML 内容

The HTML establishes the drop zone itself, which is a <div> element with the ID "dropzone" , and an unordered list element with the 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 content

The styles used by the example are shown here.

#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 内容

First, let's look at the recursive scanFiles() function. This function takes as input a FileSystemEntry representing an entry in the file system to be scanned and processed (the item parameter), and an element into which to insert the list of contents (the container 参数)。

Note that to read all files in a directory, readEntries needs to be called repeatedly until it returns an empty array. In Chromium-based browsers, the following example will only return a max of 100 entries.

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() begins by creating a new <li> element to represent the item being scanned, inserts the name of the item into it as its text content, and then appends it to the container. The container is always a list element in this example, as you'll see shortly.

Once the current item is in the list, the item's isDirectory property is checked. If the item is a directory, we need to recurse into that directory. The first step is to create a FileSystemDirectoryReader to handle fetching the directory's contents. That's done by calling the item's createReader() method. Then a new <ul> is created and appended to the parent list; this will contain the directory's contents in the next level down in the list's hierarchy.

After that, directoryReader.readEntries() is called to read in all the entries in the directory. These are each, in turn, passed into a recursive call to scanFiles() to process them. Any of them which are files are simply inserted into the list; any which are directories are inserted into the list and a new level of the list's hierarchy is added below, and so forth.

Then come the event handlers. First, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop:

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

The event handler that kicks everything off, of course, is the handler for the drop event:

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

This fetches the list of DataTransferItem objects representing the items dropped from event.dataTransfer.items . Then we call Event.preventDefault() to prevent the event from being handled further after we're done.

Now it's time to start building the list. First, the list is emptied by setting listing.innerHTML to be empty. That leaves us with an empty ul to begin inserting directory entries into.

Then we iterate over the items in the list of dropped items. For each one, we call its webkitGetAsEntry() method to obtain a FileSystemEntry representing the file. If that's successful, we call scanFiles() to process the item—either by adding it to the list if it's just a file or by adding it and walking down into it if it's a directory.

结果

You can see how this works by trying it out below. Find some files and directories and drag them in, and take a look at the resulting output.

规范

规范	状态	注释
文件和目录条目 API	草案	提议 API 草案

此 API 没有正式的 W3C 或 WHATWG (Web 超文本应用程序技术工作组) 规范。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`readEntries` 弃用非标	Chrome 8	Edge ?	Firefox Yes	IE No	Opera ?	Safari 11.1	WebView Android ≤37	Chrome Android 18	Firefox Android Yes	Opera Android No	Safari iOS 11.3	Samsung Internet Android ?

图例

完整支持
不支持
兼容性未知 ?
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。

On Chrome 77, readEntries() will only return the first 100 FileSystemEntry instances. In order to obtain all of the instances, readEntries() must be called multiple times.

另请参阅

元数据

最后修改： Oct 1, 2019

在此页

句法

参数

返回值

范例

HTML 内容

CSS content

JavaScript 内容

结果

规范

浏览器兼容性

图例

另请参阅

相关话题