使用 html5 文件系统 api 读取本地文件/目录答案

【问题标题】：Reading local files/directories with html5 filesystem api使用 html5 文件系统 api 读取本地文件/目录
【发布时间】：2013-06-21 20:35:42
【问题描述】：

我想知道是否可以使用 html5 文件系统 api 读取本地目录的内容，例如 C:\temp，还是只能访问“沙盒区域”中的文件/目录？

【问题讨论】：

@KrisHollenbeck 什么部分？这些章节涉及沙盒文件系统。

标签： html html5-filesystem

【解决方案1】：

HTML5 文件系统专为沙盒文件存储而设计，所以不，您不能使用它来访问用户的非沙盒文件系统上的文件。

【讨论】：

【解决方案2】：

MDN 上有拖放方法示例，用于显示文件或文件夹名称。如果是目录，则列出目录和子目录中的文件。

这适用于我的本地网络服务器，在这个MDN page 和这个fiddle - 但在下面的 sn-p 中不起作用，除了显示文件/文件夹名称...

let dropzone = document.getElementById("dropzone");
let listing = document.getElementById("listing");
//handle files dropped in
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);
      });
    });
  }
}
//prevent default dragover behavior
dropzone.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);
//handle 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);

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

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

https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#Example

【讨论】：