1）拖拽方面的重点是：ondragover 事件 和 ondrop 事件

ondragover 是必须的，ondragover 事件里禁用掉 html 的默认事件，否则 ondrop 事件将无效（直接捕捉不到ondrop事件了）

dropzone.addEventListener("dragover", function(event) {

    event.preventDefault();

}, false);

2）读取目录用到的 webApi 主要有： FileSystemFileEntry、FileSystemDirectoryEntry 和 FileSystemDirectoryReader

3）详情说明及示例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>H5 拖拽读取文件和文件夹</title>

<style type="text/css">

    #dropzone {

      text-align: center;

      width: 300px;

      height: 100px;

      margin: 10px;

      padding: 10px;

      border: 4px dashed red;

      border-radius: 10px;

    }

    #boxtitle {

      display: table-cell;

      vertical-align: middle;

      text-align: center;

      color: black;

      font: bold 2em "Arial", sans-serif;

      width: 300px;

      height: 100px;

    }

    body {

      font: 14px "Arial", sans-serif;

    }

</style>

</head>

<body>

<p>

    Drag files and/or directories to the box below!

</p>

<div id="dropzone">

    <div id="boxtitle">

        Drop Files Here

    </div>

</div>

<h2>Directory tree:</h2>

<ul id="listing">

</ul>

<script type="text/javascript">

    let dropzone = document.getElementById("dropzone");

    let listing  = document.getElementById("listing");

    /**

     * 读取文件

     * @param  item         FileSystemDirectoryEntry 对象实例（目录实体）

     * @param  container     显示容器

     * @return void

     */

    function scanFiles(item, container) {

        let elem       = document.createElement("li");

        elem.innerHTML = item.name;

        container.appendChild(elem);

        // 如果是目录，则递归读取

        if (item.isDirectory) {

            // 使用目录实体来创建 FileSystemDirectoryReader 实例

            let directoryReader    = item.createReader();

            let directoryContainer = document.createElement("ul");

            container.appendChild(directoryContainer);

            // 上面只是创建了 reader 实例，现在使用 reader 实例来读取 目录实体（读取目录内容）

            directoryReader.readEntries(function(entries) {

                // 循环目录内容

                entries.forEach(function(entry) {

                    // 处理内容（递归）

                    scanFiles(entry, directoryContainer);

              });

            });

        }

    }

    // 此事件是必须的，且要阻止默认事件

    dropzone.addEventListener("dragover", function(event) {

        event.preventDefault();

    }, false);

    // 拖拽结束时触发

    dropzone.addEventListener("drop", function(event) {

        // 拖拽（转移）的对象列表

        let items = event.dataTransfer.items;

        event.preventDefault();

        listing.innerHTML = "";

        for (let i=0; i<items.length; i++) {

            // file 对象（按实例拖拽的内容）转换成 FileSystemFileEntry 对象 或 FileSystemDirectoryEntry 对象

            let item = items[i].webkitGetAsEntry();

            if (item) {

                // 读取文件

                scanFiles(item, listing);

            }

        }

    }, false);

    </script>

</body>

</html>

4）用到的其他 Api：

https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer

https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem

https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry

5）官方原版示例：

https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries

H5 拖拽读取文件和文件夹的更多相关文章

  1. H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  2. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  3. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  5. H5拖拽 构造拖拽及缩放 pdf展示

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  6. H5 拖拽操作

    H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...

  7. spring html5 拖拽上传多文件

    注:这仅仅是一个粗略笔记.有些代码可能没用.兴许会再更新一个能够使用的版本号.不足之处,敬请见谅. 1.spring环境搭建,这里使用的是spring3的jar,须要同一时候引入common-IO 和 ...

  8. H5 拖拽,一个函数搞定,直接指定对象设置可拖拽

    页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...

  9. h5拖拽上传图片

    h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...

随机推荐

  1. Java多线程：AQS

    在Java多线程:线程间通信之Lock中我们提到了ReentrantLock是API级别的实现,但是没有说明其具体实现原理.实际上,ReentrantLock的底层实现使用了AQS(AbstractQ ...

  2. EBS R12视图打不到数据

    兩個原因引起的,一個是語言,一個是oualter session set nls_language ='AMERICAN';alter session set nls_language='SIMPLI ...

  3. VMWare Station 问题汇总

    1.开机黑屏,不启动系统 解决方法: 命令行窗口cmd—输入下面代码,然后重启计算机. netsh winsock reset 2.提示磁盘被锁无法打开 解决方法: 虚拟机目录下面的.lck文件都删了

  4. java中关于AtomicInteger的使用

    在Java语言中,++i和i++操作并不是线程安全的,在使用的时候,不可避免的会用到synchronized关键字.而AtomicInteger则通过一种线程安全的加减操作接口.咳哟参考我之前写的一篇 ...

  5. Chromium OS 初体验

    Chromium OS可是早有耳闻,但是一直没有尝试,最近很多评论甚至认为会对Windows和Mac都能够造成压力,于是迫不及待的想尝试一下了,百度下了官网,官网很贴心,不光给了用于写入U盘的镜像文件 ...

  6. 3、Python的应用

    Python的应用 Google 实现Web爬虫和搜索引擎中的很多组件. Yahoo Yahoo使用它(包括其他技术)管理讨论组. NASA NASA在它的几个系统中既用了Python开发,又将其作为 ...

  7. 微信小程序 scroll-view 实现锚点跳转

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...

  8. [Canvas]Bombman v1.04

    Bombman是我仿造红白机上经典游戏爆破小人,用Canvas制作的一款网页版单机游戏, 自我感觉还是有一定的可玩性. 本游戏的胜利条件是用雷消灭所有怪物,但被怪物即使是擦边碰到或是炸弹火焰炸到就算失 ...

  9. WIN10平板 如何关闭自动更新

    运行,services.msc打开组策略 找到Windows Update,设置启动类型为禁用即可

  10. jstl 格式化

    一:JSTL格式化标签又称为I18N标签库,主要用来编写国际化的WEB应用,使用此功能可以对一个特定的语言请求做出合适的处理.例如:中国内地用户将显示简体中文,台湾地区则显示繁体中文,使用I18N格式 ...