javascript - 通过 JavaScript 和 HTML5 上传目录并维护结构

Question

我正在尝试通过浏览器上传整个文件夹。我今天做了一些修改，发现有很多很棒的上传文件夹的解决方案。然而，在测试它们时，它们似乎正在使文件夹中的文件列表准备好上传，无目录结构。

是否有任何推荐的工具可以用来拖放，甚至只是选择并上传我的网站中的整个文件夹(当然，还可以维护结构)？

Answer 1

尚未正式正式发布，但可能会通过Files and Directory API为我们纯粹的网络开发人员*提供。尽管 chrome 和 Firefox 已经通过 webkit-API* 实现了类似的功能，但哪些规范仍在编写过程中，它允许我们访问和导航删除的目录。

因此，如果我们尝试使用此 webkit-API，我们可以编写如下内容:

/* constructs a simple directory view from a filesystem */
async function makedir(entries) {

  const systems = entries.map(entry => traverse(entry, {}));
  return Promise.all(systems);

  async function traverse(entry, fs) {
    if (entry.isDirectory) {
      fs[entry.name] = {};
      let dirReader = entry.createReader();
      await new Promise((res, rej) => {
        dirReader.readEntries(async entries => {
          for (let e of entries) {
            await traverse(e, fs[entry.name]);
          }
          res();
        }, rej);
      });
    } else if (entry.isFile) {
      await new Promise((res, rej) => {
        entry.file(file => {
          fs[entry.name] = file;
          res();
        }, rej);
      });
    }
    return fs;
  }
}

function readDropped(dT) {
  const entries = [...dT.items].map(item => {
      return item.webkitGetAsEntry ? item.webkitGetAsEntry() : null;
    })
    .filter(entry => entry);
  if (entries.length) {
    makedir(entries)
      .then(output)
      .catch(handleSecurityLimitation);
  } else notadir();

}

function notadir() {
  _log.textContent = "wasn't a directory, or webkitdirectory is not supported";
}

dropzone.ondragover = e => {
  e.preventDefault();
  dropzone.classList.add('over');
}
dropzone.ondragexit = dropzone.ondragend = e => dropzone.classList.remove('over');
dropzone.ondrop = e => {
  e.preventDefault();
  dropzone.classList.remove('over');
  readDropped(e.dataTransfer);
}

function output(system_trees) {
  console.log(system_trees);
  _log.textContent = JSON.stringify(system_trees, checkFile, 2);

  function checkFile(key, value) {
    if (value instanceof File) {
      return '{[File] ' + value.name + ', ' + value.size + 'b}';
    } else return value;
  }
}

function handleSecurityLimitation(error) {
  console.error(error);
  document.body.innerHTML = `
    <h2>Faced security limitations</h2>
    <a href="https://jsfiddle.net/x85vtnef/">Please go to this fiddle</a>`;
}

#dropzone {
  border: 1px solid;
  width: 90vw;
  height: 90vh;
  margin: 2vmin;
  padding: 2vmin;
  overflow: auto;
}

#dropzone.over {
  background-color: rgba(0, 0, 0, .2);
}

<div id="dropzone">
  Drop some directory here.
  <pre id="_log"></pre>
</div>

And as fiddle for chrome

<小时/>

*chrome 代码(扩展和插件)通常已经可以访问文件系统 API。*这里的“webkit-API”是指实验性的，即其行为可能随时改变，并且在每个浏览器上可能不相同。