前端实现上传文件夹与文件夹名称的获取

最近再做一个标注类的项目，需求呢就是上传文件夹（内有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/

原文地址：https://www.cnblogs.com/fengchaoran/p/9056118.html