我想知道,如果它可以读取本地目录的内容,例如C:\ TEMP,使用HTML5文件系统API或者是它只能访问文件/在“沙箱区域”目录?
Answer 1:
HTML5文件系统仅用于沙盒文件存储设计的,所以,不,你不能用它来访问用户的非沙盒文件系统中的文件。
Answer 2:
有在MDN其工作是显示文件或文件夹名称拖放方法的例子。 如果它是一个目录,它列出了目录和子目录中的文件。
这个作品在我的本地Web服务器上,在此MDN页面 ,并在此小提琴 -但不是在下面,除了显示文件/文件夹名称片段的工作...
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
文章来源: Reading local files/directories with html5 filesystem api