文件上传和了解目录结构答案

【问题标题】：File Upload and knowing the directory structure文件上传和了解目录结构
【发布时间】：2013-12-06 17:25:59
【问题描述】：

我们正在使用 jquery fileupload 将文件（和文件夹）从本地计算机拖放到浏览器。这很好用，但我们无法捕获文件夹中文件的目录结构。我理解为什么（从安全角度和 javascript）这不起作用，但有没有人对实现相同目标的最佳方法有任何想法。

再次，我希望我的客户（内部应用程序）将一个文件夹拖放到我的应用程序中。我的应用程序可以看到文件名列表并且它们被上传，但我想维护这些文件的目录结构以便在其他地方使用。即，重要的是我知道它来自目录 x/1/a 而不是 y/2/b。

提前致谢！

【问题讨论】：

我相信唯一的办法就是写一个 Firefox 扩展。
感谢您的回复。我想这可能没问题，因为我们可能对浏览器的选择有一定的控制权，但我希望使用更全球化的东西。

标签： javascript jquery file-upload jquery-file-upload javascript-security

【解决方案1】：

查看 jquery 文件上传对此的支持，与 @Dead133s 提及 webkitdirectory 相关 https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

“可以选择完整的文件夹结构，尽管目前只有 Google Chrome 支持。要启用此功能，必须将以下供应商特定的目录属性添加到文件输入字段：”

<input type="file" name="files[]" multiple directory webkitdirectory mozdirectory>

另一个低技术的解决方案是让用户压缩文件并上传它们，保留任何文件夹。

【讨论】：

这正是我所需要的，因为我们正在使用这个 jquery 上传。如果我能说服单独使用 Chrome，我将使用它，否则我可能不得不使用上传 .zip 文件来获取目录结构，然后从那里解压缩和处理。
手机不支持。

【解决方案2】：

File API: Directories and System 目前是 W3C 工作草案，已经在 webkit 中运行，在最新的 Chrome 和 Safari 中运行。

有一个不错的文件上传示例，您可以下拉目录并查看其结构： http://sapphion.com/2012/06/keep-directory-structure-when-uploading/

很棒的 html5rocks 教程： http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-dir

【讨论】：

【解决方案3】：

您可以使用类似于this 的文件系统API 的自定义实现来实现这一点，或者甚至只使用DropzoneJS，然后使用类似于下面的算法来构建属于的目录和文件的哈希映射在每个目录中。我在下面包含了一些示例代码，应该可以将您推向正确的方向。

        uploadFilesDepthFirst(folderId, folderInfo) {
            Object.keys(folderInfo.children).forEach(childFolderName => uploadFilesDepthFirst(folder.id, folderInfo.children[childFolderName]));
            folderInfo.files.map(file => uploadFile(folderId, file.file));
        }

        let fileList = files.map((file) => { return {path: file.fullPath, filename: file.name , file: file} });

        const hierarchy = {}; // {folder_name} = { name: <name of folder>, children: {...just like hierarchy...}, files: [] }
        // build tree
        fileList.map(file => {
            const paths = file.path.split('/').slice(0, -1);
            let parentFolder = null;
            // builds the hierarchy of folders.
            paths.map(path => {
                if (!parentFolder) {
                    if (!hierarchy[path]) {
                        hierarchy[path] = {
                            name: path,
                            children: {},
                            files: [],
                        };
                    }
                    parentFolder = hierarchy[path]
                } else {
                    if (!parentFolder.children[path]) {
                        parentFolder.children[path] = {
                            name: path,
                            children: {},
                            files: [],
                        };
                    }
                    parentFolder = parentFolder.children[path];
                }
            });
            parentFolder.files.push(file);
        });

        Object.keys(hierarchy).map(folderName => uploadFilesDepthFirst(parentId, hierarchy[folderName]));

【讨论】：