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. MyEclipse设置文件的编码格式

    在MyEclipse中复制properties文件的时候,发现一个问题,在EditPlus中打开文件中文可以正常显示,并且是UTF-8的编码格式. 但是将这个文件复制到MyEclipse中再打开时,中 ...

  2. AngularJS中获取数据源的几种方式

    在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中.本篇就来整理获取数据的几 ...

  3. Sql Server中sql语句自己主动换行

    怎么让sql server中的sql语句自己主动换行呢? 例如以下图: 工具--选项--全部语言 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlhbm ...

  4. jsp使用c:forEach报错 javax.servlet.jsp.PageContext.getELContext()Ljavax/el/ELContext的问题

    今天发现了一个折磨我一天的问题: 在jsp文件中使用 <c:forEach items="${checkResult}" var="item"> & ...

  5. 【翻译自mos文章】在10g中，当发生ORA-00020时，sqlplus登陆会报“connected to an idle instance”

    在10g中.当发生ORA-00020时,sqlplus登陆会报"connected to an idle instance" 来源于: Sqlplus Logon Reports ...

  6. 外贸圈 贸易经 外贸心路 一位成功外贸人的SOHO心得

    一位成功外贸人的SOHO心得 外贸圈http://waimaoquan.alibaba.com/wm Jade,高中毕业,93年进入外贸行业,刚开始,只是在公司的外贸仓库工作,10多年后的今天,他已成 ...

  7. HDU 3277 Marriage Match III(并查集+二分答案+最大流SAP)拆点，经典

    Marriage Match III Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. Atitit easyui翻页组件与vue的集成解决方案attilax总结

    Atitit easyui翻页组件与vue的集成解决方案attilax总结 ===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\U ...

  9. 【Java虚拟机】浅谈Java虚拟机

    跨平台 Java的一大特性是跨平台,而Java是如何做到跨平台的呢? 主要依赖Java虚拟机,具体来说,是Java虚拟机在各平台上的实现. Java虚拟机在不同的平台有不同的实现.同一份字节码,通过运 ...

  10. 《CLR via C#》读书笔记 之 泛型

    第十二章 泛型 2014-06-15 初始泛型 12.3 泛型基础结构 12.3.1 开放类型与封闭类型 12.3.2 泛型类型和继承 12.3.3 泛型类型同一性 12.3.4 代码爆炸 12.6 ...