H5 拖拽读取文件和文件夹
Posted tujia
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5 拖拽读取文件和文件夹相关的知识，希望对你有一定的参考价值。
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 拖拽读取文件和文件夹的主要内容，如果未能解决你的问题，请参考以下文章