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

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

posted on 2018-05-18 14:41  冯超然的博客  阅读(3355)  评论(0编辑  收藏  举报

导航