webkitdirectory 实现文件夹上传

文件夹上传这个功能在web端可能有需求，这里就简单介绍下用法。

目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。

而在谷歌浏览器下，也不是没有条件的支持，必须在input上加入一个属性：webkitdirectory后才会予以支持。

加上后效果就是这样的

附上一个文件夹跟单个文件上传的例子

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

</head>

<body>

    <input id="fileFolderMore"  type="file" name="file" webkitdirectory/>

    <input id="fileFolderOne" type='file' name="file">

</body>

<script>

  $('#fileFolderMore').change(function(e){

    // console.log(e)

    var files = e.target.files;

    console.log(files)

  })

  $('#fileFolderOne').change(function(e){

    // console.log(e)

    var files = e.target.files;

    console.log(files)

  })

</script>

</html>

上面文件夹选择后会显示文件夹的路径的

上传的话可以用formData，也可以用form表单。

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

html5 实现文件夹上传
先插个背景:最近所在项目有个小需求,就是上传文件要可以同时选择文件夹及文件,然后把文件夹内得文件及所选单文件全部选择上传,借助于搜索关键词没搜到想要的结果(相关文章貌似很好,要么就是遍历文件夹内的文件 ...
java web 实现文件夹上传(保留目录结构)
今天我弄了一下文件夹上传(很简单的首先,我们的html需要这样写 <form action="/file/upload" enctype="multipart/f ...
js文件夹上传
文件夹上传:从前端到后端文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
.net webapi 文件夹上传
如果我是DJ,是DJ,是DJ,是DJ,是DJ,是DJ,是DJ,是DJ,是DJ,是DJ,,, 前言文件夹上传目前仅支持chrome内核的浏览器. 后期整理到git(2019-5-23说:不整理了,我要 ...
Linux 本地文件或文件夹上传服务器
Linux 本地文件或文件夹上传服务器一.权限设置本地文件或文件夹上传服务器,你首先需要获取到root权限: 二.上传方式上传方式有两种 : 1.通过 FTP 客户端上传文件或文件夹: 2.通过 ...
vue文件夹上传组件选哪个好?
一. 功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
文件夹上传插件webupload插件
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

随机推荐

Callback-回调-回呼
很早以前看<Delphi 4从入门到精通>有这么一个概念——CallBack.然后在<Delphi 6从入门到精通>看同样的章节,翻译为“回调”,就有一个疑问了,什么是Call ...
（转）C#开发微信门户及应用(3)--文本消息和图文消息的应答
http://www.cnblogs.com/wuhuacong/p/3622636.html 微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习 ...
Appium Desired Capabilities信息配置
编写APPium脚本,必须要配置Desired Capabilities信息 Desired Capabilities 在启动 session 的时候是必须提供的. Desired Capabilit ...
团体程序设计天梯赛-练习集-L1-042. 日期格式化
L1-042. 日期格式化世界上不同国家有不同的写日期的习惯.比如美国人习惯写成“月-日-年”,而中国人习惯写成“年-月-日”.下面请你写个程序,自动把读入的美国格式的日期改写成中国习惯的日期. 输 ...
【转】在VMware中为Linux系统安装VM-Tools的详解教程
在VMware中为Linux系统安装VM-Tools的详解教程如果大家打算在VMware虚拟机中安装Linux的话,那么在完成Linux的安装后,如果没有安装Vm-Tools的话,一部分功能将得不到 ...
【转载】JSP 中EL表达式用法详解
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
Xcache3.2.0不支持php7.0.11
编译安装xcache3.2.0时在make这一步报错: AUTOCHECK missing : "arg_flags" "cache_size" AUTOCHE ...
Ecshop模板中html_options用法详解
程序部分 <?php $smarty->assign('status_list', $_LANG['cs']); // 订单状态 $smarty->display("ind ...
redis实现分页技术
声明:原博客在这里https://www.cnblogs.com/find-the-right-direction/p/8465011.html,谢谢哥们提供,尊重原创. 本人是在原有的springb ...
navicat 为表添加索引
navicat 为表添加索引分析常用的查询场景,为字段添加索引,增加查询速度. 可以添加单列索引,可以添加联合索引. 右键,设计表中可以查看和添加修改索引! 索引一定要根据常用的查询场景进行添加! ...

webkitdirectory 实现文件夹上传

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

随机推荐

热门专题