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

随机推荐

centos开机运行级别更改
1．使用命令切换运行级别/目标 # systemctl isolate multi-user.target //切换到运行级别3,该命令对下次启动无影响,等价于telinit 3 # systemct ...
VTK嵌入MFC同步显示
使用VTK嵌入MFC,实现四视图更新,机制和细节参考原文. 原文链接:http://blog.csdn.net/www_doling_net/article/details/8939115 原文代码: ...
C# 判断字符串是否左包含
//测试字符串左包含 //string str = "AAABBBCCC"; //char[] ss = str.ToArray(); //0-8 字符数组 //char[] s ...
python自动发邮件库yagmail（转）
一般发邮件方法我以前在通过Python实现自动化邮件功能的时候是这样的: import smtplib from email.mime.text import MIMEText from email ...
在Unity中json文件的解析方式
using System.Collections; using System.Collections.Generic; using UnityEngine; using LitJson; using ...
delphi窗口的create和free，一个古老的话题
窗体分为模式窗体和无模式窗体. 模式窗体在创建窗口创建和释放: begin if not Assigned(FB_Input_JianYanDan) then FB_Input_JianYanDan ...
生成PW配置和BFD配置
保存在配置文件中 def Main(): buf = '' f = open('pw.cfg','w') for i in range(2016): pwid = str(102 + i) buf + ...
css sprites拼合
一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.就是把网页中一些背景图片整合拼合成一张图片中,再利用DIV CSS的 ...
Solr 6.4.2对比Solr 4.10.3的新特性
1.可以修改时区了.(Solr4.10.3及之前的版本,时区只能是UTC,开发人员需要转换后才能使用.当时为了解决不能设置时区的问题,每个文档都有两个Date,一个是utc时间,一个是utc+8的中国 ...
FZU Problem 2082 过路费
Problem 2082 过路费 Accept: 875 Submit: 2839Time Limit: 1000 mSec Memory Limit : 32768 KB Problem ...

webkitdirectory 实现文件夹上传

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

随机推荐

热门专题