H5 拖拽读取文件和文件夹

为了实现拖拽文件夹，获取文件夹内部图片列表进行展示的功能

<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>

    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);