最近在做项目的过程中遇到一个需求: 要求直接上传文件夹及其文件夹下的所有内容, 并且保留文件夹中相关的嵌套信息。
做了一些调研,总结如下:
-
如何直接上传文件夹? 使用
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("/")会出现什么错误~
- 前端如何获取文件上传进度相关的信息?
前端获取上传进度信息