js+html+springboot实现文件夹上传遇到的坑及其解决方案！

最新推荐文章于 2025-09-30 12:09:58 发布

原创

最新推荐文章于 2025-09-30 12:09:58 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#文件夹上传 #html #javascript #解决方案

本文介绍了在B/S架构下实现文件夹上传时遇到的五个问题，包括H5获取文件路径问题、同名文件夹处理、创建目录的前后台选择、请求顺序保证以及遍历文件夹的限制。针对这些问题，提供了详细的解决方案，如按完整路径判断目录创建、前台判断同名文件夹、后台批量创建目录、使用onload保证请求顺序和分类处理文件上传。

最近由于项目需要开始在之前文件分片上传文件的基础上实现文件夹的上传。在开发B/S架构的文件夹上传时遇到了一下问题，并给出我们的解决方案以供参考。如您有更好的方案也欢迎及时的交流。

问题一：H5获取文件路径之后只有文件完整的相对路径串，不能直接获取他的父目录以及子目录？
首先，简单示范一下H5中获取文件完整相对路径的方法，获取到的路径形式一般为：test/a/b/c.txt的形式，如下：

var files = event.target.files;
var i=0;
var fullFilePath = files[i].webkitRelativePath;// 包含文件名的完整路径

问题分析：
由于不能像windows下可以直接使用isDirectory或者isfile之类的函数，所以只能取出文件的完整路径，然后根据已经创建了的路径列表来判断该级目录是否需要创建，而不能按照目录层级一级一级的去上传。
解决方案：
取出文件的完整目录串，拆分之后逐级判断该级是否需要创建，问了防止存在目录名称相同的情况，可以使用取完整的目录串的形式判断，即：判断test/a/b/是否存在时，需要先判断test若创建再判断test/a已经创建，再判断test/a/b已经创建。或者使用目录对应的ID串的形式判断一个目录是否已经创建。

问题二、前台是否允许存在同名文件夹？
可能在本地的C:\和D:\下都存在一个叫做test的目录，但是内容不同，这时需要允许上传这两个同名文件夹。所以这种情况必须要实现前台允许同名目录结构在同一父目录下存在的情况。

问题三、在前台创建目录还是在后台创建目录的问题？
问题分析：
（1）在前台创建目录，需要ajax请求等待后台创建完成之后才能进行上传，可能会影响上传的效率。
（2）在后台创建目录，由于前台传递给后台的是需要创建的目录串，因此当创建的根目录是相同的名称的时候，后台只能