javascript - 文件上传并了解目录结构

Question

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

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

提前致谢！

Answer 1

请参阅与@Dead133s 提及 webkitdirectory https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support相关的 jquery 文件上传支持

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

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

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

Answer 2

文件 API：目录和系统目前是 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

Answer 3

您可以使用与此类似的文件系统 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]));