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. 添加 vip

    两台机器:172.16.91.101 172.16.91.107 在91.101上增加虚拟ip,92网段的 ifconfig eth0:1 172.16.92.2 netmask 255.255.25 ...

  2. 机器学习笔记(4)：多类逻辑回归-使用gluton

    接上一篇机器学习笔记(3):多类逻辑回归继续,这次改用gluton来实现关键处理,原文见这里 ,代码如下: import matplotlib.pyplot as plt import mxnet a ...

  3. Microsoft.mshtml.dll 添加引用及类型选择错误问题解决办法

    在比较早的文章中,提到使用 Microsoft.mshtml.dll 进行模拟浏览器点击的例子. 1.添加引用的问题 一般在开发环境下会在三个地方存有microsoft.mshtml.dll文件.所以 ...

  4. Hessian学习总结(二)——使用hessian上传文件

    hessian较早版本通过 byte[] 进行文件传输:4.0之后支持 InputStream 作为参数或返回值进行传输. 注意:hessian会读取整个文件,如果文件过大,会导致JVM内存溢出.可以 ...

  5. android fastjson 解析

    JSONObject jsonObject = JSON.parseObject(wsResponse);String recommends = jsonObject.getString(" ...

  6. CSS网页布局垂直居中整理

    一.使用CSS3处理垂直居中方式 1.使用Flex布局处理(推荐),简单好用 body,html{ width:100%; height:100%; } .out { width: 20%; heig ...

  7. 如何在windows2008/2012上安装启明星系统。

    启明星系统提供多种安装方式.安装包里自带了setup.exe.每个程序的 install下有在线安装(例如请假应用程序为book,则默认为 http://localhost/book/install ...

  8. Go语言之高级篇beego框架之Controller

    一.Controller 控制器 Controller等同于Django里的view,处理逻辑都是在Controller里面完成的,下面就写一个最简单的Controller.写controller的时 ...

  9. CentOS7下FTP的安装与配置

    1.安装vsftpd 1 [root@localhost modules]# yum install -y vsftpd 2.编辑ftp配置文件 1 [root@localhost modules]# ...

  10. windows多线程同步--事件

    推荐参考博客:秒杀多线程第六篇 经典线程同步 事件Event   事件是内核对象,多用于线程间通信,可以跨进程同步 事件主要用到三个函数:CreateEvent,OpenEvent,SetEvent, ...