html5 实现 文件夹上传
先插个背景:最近所在项目有个小需求,就是上传文件要可以同时选择文件夹及文件,然后把文件夹内得文件及所选单文件全部选择上传,借助于搜索关键词没搜到想要的结果(相关文章貌似很好,要么就是遍历文件夹内的文件之类的。。。),遂研究百度网盘文件上传功能。。。。。
发现百度网盘有个上就在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 实现 文件夹上传的更多相关文章
- html5文件夹上传下载组件
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- js文件夹上传
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- Linux 本地文件或文件夹上传服务器
Linux 本地文件或文件夹上传服务器 一.权限设置 本地文件或文件夹上传服务器,你首先需要获取到root权限: 二.上传方式 上传方式有两种 : 1.通过 FTP 客户端上传文件或文件夹: 2.通过 ...
- java web 实现文件夹上传(保留目录结构)
今天我弄了一下文件夹上传(很简单的 首先,我们的html需要这样写 <form action="/file/upload" enctype="multipart/f ...
- Web大文件(夹)上传(断点续传)控件发布-Xproer.HttpUploader6
版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- Web大文件(夹)上传(断点续传)控件-Xproer.HttpUploader6
版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- webkitdirectory 实现文件夹上传
文件夹上传这个功能在web端可能有需求,这里就简单介绍下用法. 目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件 ...
- vue文件夹上传组件选哪个好?
一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
- 文件夹上传插件webupload插件
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
随机推荐
- .NET之父 - Anders Hejlsberg
简介 安德斯·海尔斯伯格(Anders Hejlsberg,1960.12~),丹麦人,Turbo Pascal编译器的主要作者,Delphi和.NET之父! 安德斯·海尔斯伯格曾在丹麦技术大学学习工 ...
- Java基础-Random类(05)
随机数(Random) 作用:用于产生一个随机数 使用步骤(和Scanner类似) 导包import java.util.Random; 创建对象Random r = new Random(); 获取 ...
- MySQL索引(2)
一.索引基础 1. B-Tree索引 <1> 所有的值都是按顺序存储的,并且每一个叶子页到根的距离相同. <2> 顺序组织存储,很适合查找范围数据,效率会非常高. <3& ...
- require.js实现js模块化编程(一)
1.认识require.js: 官方文档:http://requirejs.org/RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的Requ ...
- Idea报错Check $M2_HOME environment variable and mvn script match.
-Dmaven.multiModuleProjectDirectory=$M2_HOME
- 变量值a交换b,b交换a....
package day01; public class Test1 { public static void main(String[] args) { //不利用其它变量时期A和B的值交换 Inte ...
- OpenCV Image Watch 调试插件
昨晚偶然发现vs2012的这个很神奇的插件,对于经常使用opencv的人来说,这个插件无疑是我们的调试神器.今天马上下载试用,感觉超级棒!~以后要想查看图像结果,不用再imshow了! Image W ...
- 转载——yum源的超级简单配置
1.先挂载光盘. 使用命令"mount -o loop /dev/sr0 /mnt/cdrom".如果使用命令"mount -o loop /dev/cdrom ...
- KICKSTART无人值守安装
1.1 环境说明 [root@test ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [root@test ~]# uname -r - ...
- JS中的this的应用总结
简述this的用法 "this是由被调用的方式确定"这个事实,使得this可以被改变,从而为函数增加了动态性,可变性,使得变成更加灵活.目前因为工作经验有限,暂时总结一下五种情况下 ...