前端实现上传文件夹与文件夹名称的获取
Posted 冯阳阳的博客￥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端实现上传文件夹与文件夹名称的获取相关的知识，希望对你有一定的参考价值。
最近再做一个标注类的项目，需求呢就是上传文件夹（内有n张图像），然后在系统中进行标注工作。前段时间已经把标注部分的交互写好了，原以为文件夹上传很好弄，结果费了半天的劲，网上有一些介绍，但是都不是太详细。
根据上搜索结果调研了一下，ie基本是实现不了文件夹的上传，因为是新装的系统，镜像里边没有ie，所以没法测试，按照网上的说法，ie中只有Edge这个浏览器版本可以实现,其他的主流浏览器我都测试了一下，windows环境下（谷歌、火狐、搜狗、360、QQ浏览器等主流浏览器都可以使用）只需要在<input>标签下新加属性：webkitdirectory
<input type="file" webkitdirectory />
之前在网上找的文章基本上都在说只有谷歌和edge浏览器可用，但是我测试了一下，主流浏览器都可以使用。
测试了半天，又发现另一个问题，如何获取文件夹名称？测试后发现，可以获取到文件夹内文件的数量，以及文件的名称等，但是并不能在前端实现文件夹名称的获取，后来发现后台获取很容易。我的项目文件夹名称有特殊意义，需要对文件夹名称做解析，所以需要这么费劲的实现名称获取。后台可以获取到接收到的文件的相对路径例如：
360download\01.jpg
这样就等于间接的实现了文件夹名称的提取。
参考链接：
https://laike9m.com/blog/wen-jian-jia-shang-chuan-cong-qian-duan-dao-hou-duan,59/
以上是关于前端实现上传文件夹与文件夹名称的获取的主要内容，如果未能解决你的问题，请参考以下文章