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 支持所 ...

随机推荐

作业08之《MVC实现用户权限》
1. 赋给用户一个userid,在用户角色表将用户和角色关联起来,在角色权限表中将角色和权限对应起来,权限表中存储的是左边菜单栏的名称. 2. 在判断权限时,通过用户的userid,获取其角色id,然 ...
maven多个子项目、父项目之间的引用问题
在项目时用到maven管理项目,在一个就项目的基础上开发新的项目:关于子项目和父项目,子项目与子项目之间的调用问题,发现自己存在不足,以下是自己查询的问题,解决了自己的疑惑. 问题下面是一个简略的项 ...
HDU_1850_nim游戏
Being a Good Boy in Spring Festival Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32 ...
Jquery隐藏和显示Div的控制
html页面代码: <input type="checkbox" name="searchType" value="searchNews&quo ...
用批处理实现垃圾文件清除/自动关机/清除copy病毒
晚上睡觉之前为了下emule经常使用命令shutdown,最近受一个小程序影响想做个自动关机的批处理文件免的麻烦!网上有高手做了个,不过运行时出现一个绑定错误,at也不能执行,所以后来自己做了简化版 ...
基于日志实现ssh服务防护脚本
grep -n "Failed password" secure | sed -nr 's/.*from(.*)port.*/\1/gp' | sort -n |uniq -c|s ...
关于MySQL Server影响ASP.NET网站使用的问题：未能加载文件或程序集MySql.Web.v20
最近开发的ASP.NET MVC 4网站,之前头头说如果遇到装过MySQL的机器就绕着走,还觉得奇怪嘛,该来的迟早都会来于是撞上了一台启动网站再访问,总是出错,提示“未能加载文件或程序集”,名字 ...
eas快捷键
ctrl+shift+c 获取分录行的id ctrl+alt+[ 获取任意界面操作的信息
使用Linux自带的命令logrotate对Nginx日志进行切割
说明: Nginx安装目录:/usr/local/nginx/Nginx日志目录:/var/log/nginx/error/*.log /var/log/nginx/access/w1/*.log / ...
mysql查询昨天一周前一月前一年前的数据
mysql 昨天一周前一月前一年前的数据这里主要用到了DATE_SUB, 参考如下代码如下: SELECT * FROM yh_contentwhere inputtime>DATE_ ...

webkitdirectory 实现文件夹上传

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

随机推荐

热门专题