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

随机推荐

Ubuntu 更换阿里源
查看新版本信息 lsb_release -c Ubuntu 12.04 (LTS)代号为precise. Ubuntu 14.04 (LTS)代号为trusty. Ubuntu 15.04 代号为vi ...
java操作Excel的poi 遍历一个工作簿
遍历一个工作簿 package com.java.poi; import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi.h ...
Uoj #218. 【UNR #1】火车管理可持久化线段树+思维
Code: #include<bits/stdc++.h> #define maxn 500005 using namespace std; int n,Q,ty,lastans=0; i ...
jmeter的性能监控框架搭建记录(Influxdb+Grafana+Jmeter)
查看笔记 http://note.youdao.com/noteshare?id=c700365713abb98bd3d10e6f45393af9&sub=6F4E14FF3F9D4167AE ...
SBC37x交叉编译平台QT+OPENCV
一.构建交叉编译器 [随机手册]Angstrom是一个界面友好的嵌入式发行版本,用亍手持设备,机顶盒和网络存储设备等嵌入式设备. 光盘的文件系统是定制的The Angstrom Distributio ...
Java Web学习总结（22）——使用kaptcha生成验证码
kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等.下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验. 一.搭建测试环境 ...
（22）Spring Boot 拦截器HandlerInterceptor【从零开始学Spring Boot】
上一篇对过滤器的定义做了说明,也比较简单.过滤器属于Servlet范畴的API,与Spring 没什么关系. Web开发中,我们除了使用 Filter 来过滤请web求外,还可以使用Sprin ...
【入门篇】ANDROID开发之BUG专讲
话说诸葛亮是一个优秀的程序员,每个锦囊都是应对不同的case而编写的.可是优秀的程序员也敌只是更优秀的bug.六出祈山.七进中原,鞠躬尽瘁,死而后已的诸葛亮仅仅由于有一个错误的case-马谡,整个结构 ...
IOS总结_实现UIButton的图文混排(二)
非常久没有写博客了,之前写过一篇关于UIButton图文混排的,可是有点复杂,今天来一个比較简单地.相信大家回用得着 UIButton *button=[[UIButton alloc, , )]; ...
Linux 下的时间编程总结
在嵌入式编程中中.常常须要输出系统的当前时间.计算程序的运行时间.使用计时器等.近期也做了不少关于时间的操作.今天就认真总结一下,部分内容是在网上看到的.自己经过验证总结出来. 1.时间的类型 1.格 ...

webkitdirectory 实现文件夹上传

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

随机推荐

热门专题