文件上传并了解目录结构

File Upload and knowing the directory structure

本文关键字：结构 了解 文件      更新时间：2024-04-19

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

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

提前感谢！

请参阅jquery文件上传对此的支持，这与@Dead133s提到的webkitdirectory有关https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

"可以选择一个完整的文件夹结构，尽管目前只有谷歌Chrome支持。要启用此功能，必须在文件输入字段中添加以下供应商特定的目录属性："

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

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

文件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

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