js文件上传相关知识点：如何直接上传文件夹，如果获取上传文件的文件夹信息

最新推荐文章于 2023-11-01 10:27:14 发布

aliveAmy

最新推荐文章于 2023-11-01 10:27:14 发布

阅读量1.5k

点赞数

分类专栏：前端技术-js 文章标签： html html5 javascript

本文链接：https://blog.csdn.net/xieamy/article/details/120766547

版权

前端技术-js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

最近在做项目的过程中遇到一个需求：要求直接上传文件夹及其文件夹下的所有内容，并且保留文件夹中相关的嵌套信息。

做了一些调研，总结如下：

如何直接上传文件夹？使用webkitdirectory属性，类似mutiple属性一样的。但这个属性没有官方规范，所以使用时需要注意一下。
如何获取上传文件的文件夹信息？

<body>
    <input type="file" id="file" webkitdirectory>
    <script>
        const inputElement = document.getElementById("file");
        const onFileChange = (e) => {
            console.log(e.target.files)
        };
        inputElement.addEventListener("change", onFileChange, false);
    </script>
</body>

得到的file的结构如下：

在这里插入图片描述
我上传的文件夹结构如下：

可以看到，我们能通过webkitRelativePath获取到文件夹结构相关的信息，把得到的值.split("/")一下，然后根据自己的实际需求去解析就好啦~ 因为文件，文件夹命名不允许出现“/”字符，所以可以不用担心split("/")会出现什么错误~

前端如何获取文件上传进度相关的信息？
前端获取上传进度信息

aliveAmy

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js文件上传相关知识点：如何直接上传文件夹，如果获取上传文件的文件夹信息

最近在做项目的过程中遇到一个需求：要求直接上传文件夹及其文件夹下的所有内容，并且保留文件夹中相关的嵌套信息。做了一些调研，总结如下：如何直接上传文件夹？使用webkitdirectory属性，类似mutiple属性一样的。但这个属性没有官方规范，所以使用时需要注意一下。如何获取上传文件的文件夹信息？<body> <input type="file" id="file" webkitdirectory> <script>
复制链接

扫一扫