如何从文件夹选取器输入中读取 html5 中的目录

Question

我想要一个输入字段，让你选择一个文件夹。然后使用 html5 目录读取器 api 递归读取其中的所有文件和文件夹。

有谁知道任何专门这样做的教程？我这里有代码，但它不起作用，它在读取时总是列出空数组。

<input type="file" id="filepicker" name="fileList" webkitdirectory directory />
<button id="ff">Read</button>
<ul id="filelist"></ul>

.js

function toArray(list) {
  return Array.prototype.slice.call(list || [], 0);
}
function listResults(entries) {
  // Document fragments can improve performance since they're only appended
  // to the DOM once. Only one browser reflow occurs.
  var fragment = document.createDocumentFragment();
  entries.forEach(function(entry, i) {
    var img = entry.isDirectory ? '<img src="folder-icon.gif">' :
                                  '<img src="file-icon.gif">';
    var li = document.createElement('li');
    li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
    fragment.appendChild(li);
  });
  document.querySelector('#filelist').appendChild(fragment);
}
function onInitFs(fs) {
  var dirReader = fs.root.createReader();
  var entries = [];
  // Call the reader.readEntries() until no more results are returned.
  var readEntries = function() {
     dirReader.readEntries (function(results) {
      if (!results.length) {
        listResults(entries.sort());
      } else {
        entries = entries.concat(toArray(results));
        readEntries();
      }
    }, errorHandler);
  };
  readEntries(); // Start reading dirs.
}
function errorHandler(e) {
  var msg = '';
  switch (e.code) {
    case DOMError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case DOMError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case DOMError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case DOMError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case DOMError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };
  console.log('Error: ' + msg);
}

document.getElementById("ff").addEventListener("click", function() {
    var selectedFiledf = $("#filepicker").val();
    window.webkitRequestFileSystem(selectedFiledf, 1024*1024, onInitFs, errorHandler);
});

Answer 1

您可以将一个函数附加到文件输入的 onchange 事件。调用此函数时，您将能够通过访问 event.target.files 来访问文件列表。然后，当用户按"读取"按钮时，可以处理文件。

var files;
document.getElementById("filepicker").addEventListener("change", function(event) {
  files = event.target.files;
}, false);

本指南可能有用： https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory