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. mongodb crud

    //添加数据 db.users.insert({,"gender":"男"}); db.users.insert({"name":" ...

  2. java三大特性--多态（1）

    定义 对象具有多种形态 类型 引用的多态: 父类的引用指向自身对象 父类的引用指向子类对象 TrafficTool traffictool=new TrafficTool();//父类的引用指向本身类 ...

  3. DirectUI消息循环的简单封装

      一.真窗体和假窗体 首先在DirectWindow内部创建一个真窗体(基于WTL),可以接收消息 class CMessageWindow : public CWindowImpl< CMe ...

  4. 【springboot】【socket】spring boot整合socket,实现服务器端两种消息推送

    参考地址:https://www.cnblogs.com/hhhshct/p/8849449.html

  5. logback身份证脱敏

    logback身份证脱敏 学习了:https://shift-alt-ctrl.iteye.com/blog/2425469 https://blog.csdn.net/fywfengyanwei/a ...

  6. from String value ('{}'); no single-String constructor/factory

    需要为类增加一个接受String的构造函数: 例如: public class B { private String name; public B(String b) { } public Strin ...

  7. Windows 7用U盘安装CentOS 7

    已经有Windows 7,准备再安装一个CentOS 7. 1. 划分磁盘空间 从磁盘上划分安装CentOS 7的安装空间.如果有多个硬盘的话,一定要在主硬盘上划分2G的空间(其实1G就够了)作为bo ...

  8. MySQL 各级别事务的实现机制

    MySQL 各级别事务的实现机制在处理cnctp项目已合包裹状态同步的问题时,发现读包裹状态和对包裹状态的更新不在一个事务内,我提出是否会因为消息并发导致状态一致性问题.在和同事讨论的过程中,我们开始 ...

  9. 解决“错误为Lc.exe已退出，代码为-1”

    今天做项目的时候突然出现编译不通过,错误为Lc.exe已退出,代码为-1.网查了一下,原因是项目中使用了第三方组件(Developer Express v2011)造成的,分享如下:这个第三方组件是个 ...

  10. Spring Boot 2.0 返回JSP页面实战

    1. 模板引擎JSP的限制 在开始之前呢,我觉得我们有必要先去了解下 Spring Boot 2.0 官方文档中提到的如下内容: 模板引擎 除了REST Web服务之外,还可以使用Spring MVC ...