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

时间:2016-05-08 23:59:45

标签: jquery file upload blueimp

我正在尝试使用此插件(https://github.com/blueimp/jQuery-File-Upload)并在文件夹上传方面感兴趣。

我想知道该插件是否能够保留上传子文件夹的结构(=上传1个包含3个子文件夹的文件夹,每个子文件夹包含多个文件)?

1 个答案:

答案 0 :(得分:1)

这应该可以在webkit个浏览器上使用.dataTransfer事件中的拖放drop对象进行; .webkitGetAsEntry(); webkitRequestFileSystem getDirectory()创建与上传文件夹同名的目录,.createReader() DirectoryEntryreadEntries()以迭代目录中的条目,调用.copyTo()每个FileEntry目的地都被创建了目录,上传了目录名。

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

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

  

能够保留上传的子文件夹的结构(=上传   1个包含3个子文件夹的文件夹,每个文件夹包含多个文件)?

在文件管理器中,文件夹的名称与上传的目录不同,但应保留文件夹和文件结构。该文件夹应位于File System位于{profile}文件夹的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)
    }
  }
}

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

相关问题