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 支持所 ...
随机推荐
- maven中jetty插件配置
maven中jetty插件的配置,可用于项目在内置jetty服务器中的部署. <plugin> <groupId>org.mortbay.jetty</groupId&g ...
- 关于docker使用的几个小问题(一)
由于刚接触docker踩了几个坑,希望本文对网瘾少年有所帮助. Docker分CE版(社区版)和EE版(商用版),具体安装流程参考文档介绍,在此不再赘述.下面分Windows和Linux分别踩坑: 一 ...
- Hibternate框架笔记
Hibernate框架 配置 配置文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE h ...
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from '@an ...
- Javaweb项目开发的前后端解耦的必要性
JavaWeb项目为何我们要放弃jsp?为何要前后端解耦?为何要动静分离? 使用jsp的痛点: 1.jsp上动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种静态资源的http请求, ...
- Rank of Tetris
Rank of Tetris Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- css 3d
Perspective 透视点,视角,CSS3D 的透视点在浏览器前方 默认值为none,是作用于子元素,指定观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z>0的三维元素比 ...
- jQuery选择器(基本过滤选择器)第三节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- MS-SQL 错误: The offset specified in a OFFSET clause may not be negative
Example 1 : (Fetch clause must be greater than zero) USE AdventureWorks2012 GO SELECT * FROM [HumanR ...
- 如何让只支持IE浏览器的jsp转为可以支持chrome
如果你的项目只能使用IE浏览器打开,你想让其支持chrome的话,可以试一下下面的代码哦: function showLayerDialog(url,paramFuction){ top.layer. ...