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

随机推荐

jQuery顺序加载图片(终版)
这一篇是对上一篇(jQuery顺序加载图片(初版)--http://www.cnblogs.com/newbie-cc/p/3707504.html)的改进. function loadImage(i ...
MSCRM4 在过滤后的LOOKUP框中实现查找
在MSCRM中让Lookup根据一定的条件实现过滤功能, 这个需求很常见, 在我接触的诸多项目中似乎都需要有这个功能. 但非常遗憾是, MSCRM 的SDK并没有提供实现这个功能的方法. 不过我们应该 ...
Java---23种设计模式(九）------组合模式
一.什么是组合模式组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象. 组合模式依据树形结构来组合对象,用来表示部分以及整体层次. 这种类型的 ...
BZOJ 4327: JSOI2012 玄武密码后缀自动机
Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...
10.3 .NET 3.5 中的扩展方法
10.3.4 用 Select 方法和匿名类型进行投影 class Program { static void Main(string[] args) { , ).Where(x => x % ...
理解Linux CPU负载和 CPU使用率
CPU负载和 CPU使用率这两个从一定程度上都可以反映一台机器的繁忙程度. cpu使用率反映的是当前cpu的繁忙程度,忽高忽低的原因在于占用cpu处理时间的进程可能处于io等待状态但却还未释放进入w ...
centos 配置svn http serve
你看到的这个文章来自于http://www.cnblogs.com/ayanmw 基本的安装包有: subversion /httpd/ svn的httpd的mod_dav_svn mod_authz ...
51nod1289 大鱼吃小鱼
有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示向右).问足够长的时间之后 ...
UOJ #310 黎明前的巧克力 (FWT)
题目传送门题目大意:给你一个序列,定义一个子序列的权值表示子序列中元素的异或和,现在让你选出两个互不相交的子序列,求选出的这两个子序列权值相等的方案数,$n,a_{i}\leq 10^{6}$ 这是 ...
CSS定位相关
CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进 ...

webkitdirectory 实现文件夹上传

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

随机推荐

热门专题