Javascript 文件上传和了解目录结构

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

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

---

提前谢谢

文件API：目录和系统目前是W3C的工作草案，已经在webkit中运行，在最新的Chrome和Safari中运行

有一个很好的文件上传示例，您可以下拉一个目录，查看其结构：

很棒的html5rocks教程：

---

有关@Dead133s提到webkitdirectory的内容，请参见jquery file upload对此的支持

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

---

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

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

        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]));

uploadFilesDepthFirst（folderId，folderInfo）{
Object.keys（folderInfo.children）.forEach（childFolderName=>uploadFilesDepthFirst（folder.id，folderInfo.children[childFolderName]）；
map（file=>uploadFile（folderId，file.file））；
}
让fileList=files.map（（file）=>{return{path:file.fullPath，filename:file.name，file:file}}）；
常量层次={}；//{folder_name}={name:，子项：{…就像层次结构一样…}，文件：[]}
//建树
map（文件=>{
常量路径=file.path.split（'/'）.slice（0，-1）；
让parentFolder=null；
//构建文件夹的层次结构。
path.map（路径=>{
如果（！parentFolder）{
如果（！层次结构[路径]）{
层次结构[路径]={
名称：路径，
儿童：{}，
文件：[]，
};
}
parentFolder=层次结构[路径]
}否则{
如果（！parentFolder.children[path]）{
parentFolder.children[path]={
名称：路径，
儿童：{}，
文件：[]，
};
}
parentFolder=parentFolder.children[path]；
}
});
parentFolder.files.push（文件）；
});
Object.keys（hierarchy）.map（folderName=>uploadFilesDepthFirst（parentId，hierarchy[folderName]）；

我认为唯一的办法就是编写Firefox扩展。谢谢您的回复。我想这可能还可以，因为我们可能对浏览器的选择有一些控制权，但我希望在使用上有更全球化的东西。这正是我所需要的，因为我们正在使用这个jquery上传。如果我能说服使用Chrome浏览器，我会使用它，否则我可能不得不上传一个.zip文件来获取目录结构，然后从那里解压和处理。手机不支持。

        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]));