jQuery 文件上传插件：是否可以保留上传文件夹的结构？

Question

我正在试用这个插件 (https://github.com/blueimp/jQuery-File-Upload) 并且对文件夹上传很感兴趣。

我想知道插件是否能够保留上传的子文件夹的结构（= 上传 1 个文件夹和 3 个子文件夹，每个文件夹包含几个文件）？

Answer 1

这应该可以在 webkit 浏览器中使用拖放 .dataTransfer 对象在 drop 事件中实现； .webkitGetAsEntry(); webkitRequestFileSystem getDirectory() 创建与上传文件夹同名的目录，DirectoryEntry 上的 .createReader()，readEntries() 迭代目录中的条目，调用 .copyTo()每个 FileEntry 的目标目录都已上传目录名称。

现在应该可以使用 webkitRequestFileSystem() 访问该文件夹，然后调用 .getDirectory() 并将目录名称作为第一个参数，将空选项对象 {} 作为第二个参数。

或者，可以使用文件管理器 gui 或命令行界面从位于 chrome 的实际用户文件系统或 chromium 配置文件夹访问文件夹。或者，创建一个本地脚本，将 File System 中的文件夹复制到另一个目录，并将文件夹重命名为上传文件夹的原始名称。不调整文件夹和文件路径，只调整文件夹名称。

is able to preserve the structure of uploaded subfolders (= uploading 1 folder with 3 subfolder, each containing several files)?

在文件管理器中，文件夹的名称不会与上传的目录相同，但应保留文件夹和文件结构。该文件夹应位于 File System 中的最后一个文件夹 chrome 个人资料文件夹中，在 Origins 文件夹之前。另见 How to Write in file (user directory) using JavaScript?

function errorHandler(e) {
  console.log(e)
}

function handleFiles(e) {
  console.log("file", file)
}

function handleDrop(event) {
  var dt = event.dataTransfer;
  for (var i = 0; i < event.dataTransfer.items.length; i++) {
    var entry = dt.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      console.log("isFile", entry.isFile, entry);
      entry.file(handleFiles);
    } else if (entry.isDirectory) {
      console.log("isDirectory", entry.isDirectory, entry);
      window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024
      , function(fs) {
        // create directory with uploaded directory name
        fs.root.getDirectory(entry.name, {
          create: true
        }, function(dirEntry) {
          // read folders, files in uploaded directory
          var reader = entry.createReader();
          reader.readEntries(function(entries) {
            entries.forEach(function(file) {
              // copy files to new directory
              file.copyTo(dirEntry);
              console.log("file:", file, "\ncopied to directory:", dirEntry)
            })
          })
        }, errorHandler)
      }, errorHandler)
    }
  }
}

plnkrhttp://plnkr.co/edit/oUIhwUc3CDxI64SrvxIh?p=preview

jQuery 文件上传插件：是否可以保留上传文件夹的结构？

jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?

upload

jquery

file

blueimp