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. [原创]Eclipse Memory Analyzer tool(MAT)工个使用介绍

    [原创]Eclipse Memory Analyzer tool(MAT)工个使用介绍

  2. Jenkins和maven自动化构建java程序

    转自:http://www.cnblogs.com/gao241/archive/2013/04/08/3008380.html,版权归原作者所有. Jenkins是一个非常出色的持续集成服务器,本文 ...

  3. zookeeper leader选举机制

    最近看了下zookeeper的源码,先整理下leader选举机制 先看几个关键数据结构和函数 服务可能处于的状态,从名字应该很好理解 public enum ServerState { LOOKING ...

  4. Revit API创建房间

    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] );             ...

  5. 细说firewalld和iptables

    在RHEL7里有几种防火墙共存:firewalld.iptables.ebtables,默认是使用firewalld来管理netfilter子系统,不过底层调用的命令仍然是iptables等. fir ...

  6. 【OpenCV】选择ROI区域 (转)

    问题描述:在测试目标跟踪算法时,需要选择不同区域作为目标,进行目标跟踪,测试目标跟踪的效果. 解决思路: 1.OpenCV中提供了鼠标交互控制,利用setMouseCallback()给固定的窗口设置 ...

  7. jni4net使用小结

    网站首页 http://jni4net.com/ 一个简单的例子: 1)      从这里下载binaries,然后解压缩. https://sourceforge.net/projects/jni4 ...

  8. tmux的复制粘贴

    tmux有面板的概念,这导致普通终端下的ctrl+shift+C的模式复制出来的文本会串行.如果面板只有一列当然没有问题,但当面板有多列时,复制就会出问题.于是tmux提出了类似vim的复制模式.因此 ...

  9. mysqld_safe 无法启动的原因

    [root@localhost ~]# 170408 09:53:13 mysqld_safe Logging to '/usr/local/mysql/data/localhost.localdom ...

  10. 设置log rotation避免tomcat catalina.out文件增长过大

    创建logrotate配置文件 $ vi /etc/logrotate.d/tomcat 添加以下内容: /opt/tomcat/logs/catalina.out { copytruncate da ...