Question

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

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

提前致谢！

Answer 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>

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

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

您可以使用类似于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]));

文件上传并了解目录结构

3 个答案: