通过JavaScript和HTML5上传目录和维护结构 [英] Uploading directory and maintainign structure through JavaScript and HTML5

问题描述

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

I'm trying to upload whole folders through the browser. I've done a fair bit of tinkering today and discovered that there are a number of great solutions for uploading folders. However, when testing them, they seem to be making the list of files in the folders ready for upload, sans directory structure.

是否存在我可以使用任何推荐的工具来拖放，甚至只是从我的网站选择和上传整个文件夹（当然还有维护结构）？

Is there any recommended tool I can use to drag and drop, or even just select and upload, entire folders from my site (and of course, maintain structure)?

推荐答案

还不是正式的，但可能会有我们仅仅是网络开发者*通过文件和目录API 哪些规范仍处于编写过程中，即使chrome和Firefox已经通过 webkit-API * ，它允许我们访问和导航已删除目录。

Not really officially yet, but there will probably be, available for us mere web-developers* through the Files and Directory API which specs are still in the process of being written, even though chrome and Firefox already implement something similar through a webkit-API*, which allows us to access and navigate dropped directories.

因此，如果我们尝试使用这个webkit-API，我们可以写一些东西像这样：

So if we try to use this webkit-API, we could write something like this:

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

* chrome代码（扩展和插件）通常已经可以访问FileSystem API。
* webkit -API这里意味着实验，即哪些行为可能随时改变，并且可能在每个浏览器上都不一样。

这篇关于通过JavaScript和HTML5上传目录和维护结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！