如何使用JavaScript打包用户选中的文件夹以实现上传

要实现用户选中文件夹的前端压缩，核心是利用文件选择器返回的文件对象的webkitRelativePath属性（该属性会保留文件在选中目录中的相对路径结构），结合JSZip或client-zip工具就能完整复刻原目录结构并压缩。以下是两种工具的具体实现方案：

一、表单基础设置 #

首先确保文件选择器支持文件夹选择：

<input type="file" id="folderInput" webkitdirectory directory multiple>
<button id="compressBtn">压缩并下载</button>

• webkitdirectory和directory属性让用户可以选择整个文件夹
• multiple确保能获取文件夹下所有层级的文件

二、使用JSZip实现压缩 #

JSZip是老牌前端压缩库，需手动根据文件的相对路径创建目录结构：

1. 引入JSZip

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

2. 编写压缩逻辑

document.getElementById('compressBtn').addEventListener('click', async () => {
  const folderInput = document.getElementById('folderInput');
  const files = Array.from(folderInput.files);
  if (files.length === 0) return;

  const zip = new JSZip();

  // 遍历所有文件，按相对路径添加到zip中
  for (const file of files) {
    // 拆分相对路径，创建对应的目录结构
    const pathParts = file.webkitRelativePath.split('/');
    const fileName = pathParts.pop();
    const folderPath = pathParts.join('/');

    // 获取文件的ArrayBuffer
    const fileBuffer = await file.arrayBuffer();

    // 如果有目录路径，先创建目录，再添加文件
    if (folderPath) {
      zip.folder(folderPath).file(fileName, fileBuffer);
    } else {
      zip.file(fileName, fileBuffer);
    }
  }

  // 生成zip文件的Blob
  const zipBlob = await zip.generateAsync({ type: 'blob' });

  // 创建下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(zipBlob);
  // 用选中的第一个文件的路径提取根文件夹名作为zip文件名
  const rootFolderName = files[0].webkitRelativePath.split('/')[0];
  downloadLink.download = `${rootFolderName}.zip`;
  downloadLink.click();

  // 释放URL对象
  URL.revokeObjectURL(downloadLink.href);
});

三、使用client-zip实现压缩 #

client-zip是轻量化库，无需手动处理目录结构，直接利用webkitRelativePath即可自动生成目录：

1. 引入client-zip

<script src="https://cdn.jsdelivr.net/npm/client-zip@2.4.0/dist/client-zip.min.js"></script>

2. 编写压缩逻辑

document.getElementById('compressBtn').addEventListener('click', async () => {
  const folderInput = document.getElementById('folderInput');
  const files = Array.from(folderInput.files);
  if (files.length === 0) return;

  // 利用client-zip的download函数，直接传入带相对路径的文件数组
  const { download } = window;
  const rootFolderName = files[0].webkitRelativePath.split('/')[0];
  await download(`${rootFolderName}.zip`, files);
});

client-zip会自动识别每个文件的webkitRelativePath，在zip中重建完整的目录结构，代码更简洁。

关键说明 #

• webkitRelativePath是实现目录结构保留的核心：每个选中的文件都会携带该属性，格式为根文件夹名/子目录/文件名，通过这个路径可以精准还原原目录结构。
• 兼容性：主流浏览器（Chrome、Firefox、Edge）均支持webkitdirectory和webkitRelativePath，无需担心兼容问题。

内容的提问来源于stack exchange，提问作者Brenden Delong