先插个背景:最近所在项目有个小需求,就是上传文件要可以同时选择文件夹及文件,然后把文件夹内得文件及所选单文件全部选择上传,借助于搜索关键词没搜到想要的结果(相关文章貌似很好,要么就是遍历文件夹内的文件之类的。。。),遂研究百度网盘文件上传功能。。。。。

发现百度网盘有个上就在input type=file 的标签上加个一个属性“webkitdirectory”,加上次属性即可选择整个文件夹。

查询属性“webkitdirectory”发现这并不是一个标准支持的属性,经测试,目前仅支持chrome浏览器,IE11/MOZ均不支持  safari暂未测试,谨慎使用。

MDN:关于次属性说明:

* Non-standard
* This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between * * * *implementations and the behavior may change in the future.

The HTMLInputElement.webkitdirectory is a property that reflects the webkitdirectory HTML attribute and indicates that the <input> element should let the user select directories instead of files. When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. The selected file system entries can be obtained using the webkitEntries property.

对于目前要上传文件夹原生暂未完全支持,要寻求兼容各浏览器文件夹上传恐怕要多费写功夫。如有相关已经实现切体验良好的上传文件夹功能可以使用,请推荐,谢谢!

可以参考百度网盘网页版做法:支持此属性则显示上传文件夹选项,如果不支持次属性不显示上传文件夹选项

html5 实现 文件夹上传的更多相关文章

  1. html5文件夹上传下载组件

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  2. js文件夹上传

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  3. Linux 本地文件或文件夹上传服务器

    Linux 本地文件或文件夹上传服务器 一.权限设置 本地文件或文件夹上传服务器,你首先需要获取到root权限: 二.上传方式 上传方式有两种 : 1.通过 FTP 客户端上传文件或文件夹: 2.通过 ...

  4. java web 实现文件夹上传(保留目录结构)

    今天我弄了一下文件夹上传(很简单的 首先,我们的html需要这样写 <form action="/file/upload" enctype="multipart/f ...

  5. Web大文件(夹)上传(断点续传)控件发布-Xproer.HttpUploader6

    版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  6. Web大文件(夹)上传(断点续传)控件-Xproer.HttpUploader6

    版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  7. webkitdirectory 实现文件夹上传

    文件夹上传这个功能在web端可能有需求,这里就简单介绍下用法. 目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件 ...

  8. vue文件夹上传组件选哪个好?

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

  9. 文件夹上传插件webupload插件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

随机推荐

  1. IDEA-最简单的struts2项目 关于lib项目的默认位置

    文件结构 struts.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts ...

  2. phalcon——Paginator分页

    phalcon使用的分页器是Phalcon\Paginator. 首先先展示一个比较完整的使用例子: 控制器代码: use Phalcon\Paginator\Adapter\Model as Pag ...

  3. LeetCode 405. Convert a Number to Hexadecimal (把一个数转化为16进制)

    Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...

  4. ios 中的 GCD

    摘自:http://www.cocoachina.com/swift/20150129/11057.html libdispatch是Apple所提供的在IOS和OS X上进行并发编程的库,而GCD正 ...

  5. .1-Vue源码起步

    搞事!搞事! 截止2017.5.16,终于把vue的源码全部抄完,总共有9624行,花时大概一个月时间,中间迭代了一个版本(2.2-2.3),部分代码可能不一致,不过没关系! 上一个链接https:/ ...

  6. 版本控制之五:SVN trunk(主线) branch(分支) tag(标记) 用法详解和详细操作步骤(转)

    使用场景: 假如你的项目(这里指的是手机客户端项目)的某个版本(例如1.0版本)已经完成开发.测试并已经上线了,接下来接到新的需求,新需求的开发需要修改多个文件中的代码,当需求已经开始开发一段时间的时 ...

  7. Android 开发笔记___spinner__适配器基础_arrayadapter

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  8. 二叉搜索树 (BST) 的创建以及遍历

    二叉搜索树(Binary Search Tree) : 属于二叉树,其中每个节点都含有一个可以比较的键(如需要可以在键上关联值), 且每个节点的键都大于其左子树中的任意节点而小于右子树的任意节点的键. ...

  9. 删除“自豪的采用wordpress”

    网上的都是老一套了,方法不对. 听我的~ 先进入wordpress的安装目录,比如我的是:cd /www/wwwroot/www.yangnan.tk然后再进入,我的主题是twentyseventee ...

  10. CSS3属性——“box-flex”

    CSS3的新增属性有很多,其中有一个比较神奇的,通常称为盒子模型布局,不需要把div浮动,也能合理分配.看如下例子: HTML: <div id="box"> < ...