轻松驾驭上传文件夹！一键式拖拽、构建你的树形结构

前端

2023-04-22 15:08:33

一键上传文件夹，构建树形结构：JS实现

前端开发中，上传文件夹的需求日益增多，高效、便捷的上传方式至关重要。JS上传文件夹功能应运而生，它可以让您轻松实现一键式拖拽上传文件夹，并将其清晰地展示为树形结构。

实现原理

1. HTML元素准备

首先，在HTML中添加<input type="file">元素作为上传入口，并设置multiple和directory属性以支持多文件和文件夹上传。同时，创建一个<div>元素用来显示上传的文件夹结构。

2. JavaScript事件监听

为<input type="file">元素添加事件监听器，当文件上传时触发handleFileUpload函数。

3. 文件读取与解析

在handleFileUpload函数中，使用FileReader对象读取上传的文件夹内容并将其解析为JSON格式。

4. 树形结构构建

使用递归函数buildTree将解析后的文件和文件夹组织成树形结构。

5. 树形结构渲染

最后，使用renderTree函数将树形结构渲染到准备好的<div>元素中，以HTML或其他框架的形式展示。

代码示例

<input type="file" id="file-input" multiple directory>
<div id="tree-view"></div>

document.getElementById('file-input').addEventListener('change', handleFileUpload);

function handleFileUpload(event) {
  const files = event.target.files;
  const reader = new FileReader();

  reader.onload = function() {
    const data = reader.result;
    const files = JSON.parse(data);
    const treeData = buildTree(files);
    renderTree(treeData, document.getElementById('tree-view'));
  };

  reader.readAsText(files[0]);
}

function buildTree(files) {
  const treeData = {};

  for (const file of files) {
    if (file.type === 'directory') {
      treeData[file.name] = buildTree(file.children);
    } else {
      treeData[file.name] = file.data;
    }
  }

  return treeData;
}

function renderTree(treeData, element) {
  const ul = document.createElement('ul');

  for (const key in treeData) {
    const li = document.createElement('li');
    const span = document.createElement('span');
    span.textContent = key;

    if (treeData[key] instanceof Object) {
      const nestedUl = document.createElement('ul');
      renderTree(treeData[key], nestedUl);
      li.appendChild(nestedUl);
    } else {
      const p = document.createElement('p');
      p.textContent = treeData[key];
      li.appendChild(p);
    }

    li.appendChild(span);
    ul.appendChild(li);
  }

  element.appendChild(ul);
}