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

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/

以上是关于前端实现上传文件夹与文件夹名称的获取的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery.form.js实现文件上传及进度条前端代码

前端如何上传文件,下载文件

前端如何上传文件,下载文件

前端如何上传文件,下载文件

PHP 无法获取通过 Dropzone 上传的文件?

MVC实现简单的上传与下载