JavaScript实现文件夹压缩与解压缩完整攻略

// 假设用户选择了名为 "report.pdf" 的文件
const file = document.querySelector('input[type="file"]').files[0];
console.log(file.name);           // "report.pdf"
console.log(file.size);           // 1048576 (1MB)
console.log(file.type);           // "application/pdf"
console.log(file.lastModified);   // 1700000000000
console.log(file.webkitRelativePath); // "" （普通文件选择）

<input type="file" id="fileInput" multiple />
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files; // FileList 对象
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        console.log(`文件 ${i + 1}:`, file.name, file.size, file.type);
    }
});
</script>

const input = document.getElementById('multiFileInput');
input.addEventListener('change', () => {
    const fileList = input.files; // FileList 实例
    console.log(fileList.length); // 文件数量
    // 访问单个文件
    for (let i = 0; i < fileList.length; i++) {
        const file = fileList[i];
        console.log(file.name);
    }
    // 转换为真实数组以便使用现代方法
    const fileArray = Array.from(fileList);
    fileArray.forEach(f => console.log(f.name));
});

function validateFiles(fileList) {
    const maxFiles = 5;
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (fileList.length > maxFiles) {
        alert(`最多只能选择 ${maxFiles} 个文件`);
        return false;
    }
    for (let file of fileList) {
        if (!allowedTypes.includes(file.type)) {
            alert(`${file.name} 不是允许的图片格式`);
            return false;
        }
    }
    return true;
}

<input type="file" id="fileInput" multiple />
<ul id="fileList"></ul>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
    const output = document.getElementById('fileList');
    output.innerHTML = ''; // 清空旧列表
    Array.from(e.target.files).forEach(file => {
        const li = document.createElement('li');
        li.textContent = `${file.name} (${(file.size / 1024).toFixed(2)} KB)`;
        output.appendChild(li);
    });
});
</script>

graph TD
    A[用户选择多个文件] --> B{触发 input change 事件}
    B --> C[获取 FileList 对象]
    C --> D[检查文件数量是否超限]
    D -- 超限 --> E[提示错误并终止]
    D -- 正常 --> F[遍历每个 File]
    F --> G[验证 MIME 类型]
    G -- 不合法 --> H[标记并警告]
    G -- 合法 --> I[加入待处理队列]
    I --> J[生成预览或上传]

<input type="file" 
       id="uploader" 
       accept=".jpg,.png" 
       multiple 
       webkitdirectory />

<label for="filePicker">请选择图像文件：</label>
<input type="file" 
       id="filePicker" 
       accept="image/*" 
       multiple />
<script>
document.getElementById('filePicker').addEventListener('change', async (e) => {
    const files = Array.from(e.target.files);
    const imageFiles = files.filter(f => f.type.startsWith('image/'));
    const previews = document.getElementById('previewContainer');
    previews.innerHTML = '';
    for (const file of imageFiles) {
        const img = new Image();
        img.src = URL.createObjectURL(file); // 创建临时URL
        img.style.maxWidth = '200px';
        img.onload = () => URL.revokeObjectURL(img.src); // 释放内存
        previews.appendChild(img);
    }
});
</script>
<div id="previewContainer"></div>

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

npm install @zip.js/zip.js

import { createWriter, BlobWriter, BlobReader } from '@zip.js/zip.js';

async function initZipWriter() {
  const blob = new Blob([], { type: 'application/zip' });
  const writer = await zip.createWriter(new zip.BlobWriter(blob));
  return writer;
}

graph TD
    A[开始] --> B{判断引入方式}
    B -->|CDN| C[全局zip对象可用]
    B -->|npm| D[模块导入特定API]
    C --> E[创建BlobWriter]
    D --> E
    E --> F[调用createWriter]
    F --> G[获取Writer实例]
    G --> H[准备添加文件]

[Local Header 1][File Data 1][Data Descriptor?]
[Local Header 2][File Data 2][Data Descriptor?]
[Central Directory]
[End of Central Directory Record]

flowchart LR
    File --> FileReader --> TransformStream --> BlobWriter

const writer = await zip.createWriter(
  new zip.BlobWriter('application/zip'),
  { level: 6 },
  () => new zip.Deflate()
);

const blobWriter = new zip.BlobWriter('application/zip');
const writer = await zip.createWriter(blobWriter);

await writer.add('documents/report.txt', new zip.TextReader('Hello World'));

const file = input.files[0]; // 来自<input type="file">
await writer.add(file.name, new zip.BlobReader(file));

await writer.add('photos/vacation/sunset.jpg', photoReader);

await writer.add('empty-folder/', new zip.BlobReader(new Blob()));

await writer.close();

const zipBlob = await blobWriter.getData();

const url = URL.createObjectURL(zipBlob);

const a = document.createElement('a');
a.href = url;
a.download = 'archive.zip';
a.click();
URL.revokeObjectURL(url); // 清理内存

async function compressFiles(files) {
  const blobWriter = new zip.BlobWriter('application/zip');
  const writer = await zip.createWriter(blobWriter);
  for (const file of files) {
    await writer.add(file.name, new zip.BlobReader(file));
  }
  await writer.close();
  const zipBlob = await blobWriter.getData();
  const url = URL.createObjectURL(zipBlob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'selected-files.zip';
  a.click();
  URL.revokeObjectURL(url);
}

<input type="file" id="zipFileInput" accept=".zip" />

document.getElementById('zipFileInput').addEventListener('change', async (event) => {
    const file = event.target.files[0];
    if (!file) return;
    // 使用FileReader读取为ArrayBuffer
    const reader = new FileReader();
    reader.onload = function(e) {
        const arrayBuffer = e.target.result;
        handleZipFile(arrayBuffer); // 进入下一步处理
    };
    reader.onerror = () => console.error("文件读取失败");
    reader.readAsArrayBuffer(file);
});

import * as zip from 'https://cdn.jsdelivr.net/npm/@zip.js/zip.js';
async function handleZipFile(arrayBuffer) {
    try {
        const uint8Array = new Uint8Array(arrayBuffer);
        const reader = new zip.Uint8ArrayReader(uint8Array);
        const zipReader = new zip.ZipReader(reader);
        const entries = await zipReader.getEntries();
        processEntries(entries, zipReader); // 继续处理条目
    } catch (err) {
        console.error("解压初始化失败:", err);
    }
}

function isValidZipFile(file) {
    const MAX_SIZE = 50 * 1024 * 1024; // 50MB限制
    if (!file.name.toLowerCase().endsWith('.zip')) {
        alert("请上传ZIP格式文件");
        return false;
    }
    if (!file.type || !file.type.includes('zip')) {
        alert("MIME类型不匹配，请确认为有效ZIP文件");
        return false;
    }
    if (file.size > MAX_SIZE) {
        alert(`文件过大（${(file.size / 1024 / 1024).toFixed(2)}MB），超过50MB限制`);
        return false;
    }
    return true;
}

function checkMagicNumber(arrayBuffer) {
    const view = new Uint8Array(arrayBuffer, 0, 4);
    const magic = String.fromCharCode(view[0], view[1], view[2], view[3]);
    return magic === "PK\003\004"; // ZIP本地文件头标志
}

graph TD
    A[用户选择文件] --> B{是否为.zip?}
    B -- 否 --> C[提示错误并拒绝]
    B -- 是 --> D{MIME类型匹配?}
    D -- 否 --> C
    D -- 是 --> E{大小 ≤ 50MB?}
    E -- 否 --> F[提示超限]
    E -- 是 --> G[读取ArrayBuffer]
    G --> H{魔数为PK\003\004?}
    H -- 否 --> I[判定为非法]
    H -- 是 --> J[允许进入解压流程]

async function processEntries(entries, zipReader) {
    for (const entry of entries) {
        console.log(`文件名: ${entry.filename}`);
        console.log(`大小: ${entry.uncompressedSize} 字节`);
        console.log(`是否为目录: ${entry.directory}`);
        console.log(`压缩方法: ${entry.compressionMethod}`);
        if (!entry.directory) {
            const content = await entry.getData(new zip.BlobWriter());
            displayFileContent(entry.filename, content);
        }
    }
    await zipReader.close(); // 必须显式关闭读取器
}

function buildDirectoryTree(entries) {
    const root = { name: '/', type: 'folder', children: [] };
    for (const entry of entries) {
        const pathParts = entry.filename.split('/').filter(p => p !== '');
        let current = root;
        for (let i = 0; i < pathParts.length; i++) {
            const part = pathParts[i];
            const isLast = i === pathParts.length - 1;
            let child = current.children.find(c => c.name === part);
            if (!child) {
                child = {
                    name: part,
                    type: isLast && !entry.directory ? 'file' : 'folder',
                    size: isLast ? entry.uncompressedSize : undefined,
                    entry: isLast ? entry : undefined
                };
                current.children.push(child);
            }
            current = child;
        }
    }
    return root;
}

// 获取为文本（适用于 .txt, .json, .html 等）
const text = await entry.getData(new zip.TextWriter());
// 获取为 Blob（通用）
const blob = await entry.getData(new zip.BlobWriter());
// 获取为 ArrayBuffer（底层操作）
const buffer = await entry.getData(new zip.Uint8ArrayWriter());

function displayImage(filename, blob) {
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = url;
    img.alt = filename;
    img.style.maxWidth = '300px';
    document.body.appendChild(img);
}

function displayText(filename, text) {
    const pre = document.createElement('pre');
    pre.textContent = text;
    pre.style.backgroundColor = '#f4f4f4';
    pre.style.padding = '10px';
    document.body.appendChild(pre);
}

function renderTree(node, parentEl) {
    const li = document.createElement('li');
    li.textContent = node.name + (node.type === 'file' ? ` (${node.size}B)` : '');
    if (node.children && node.children.length > 0) {
        const ul = document.createElement('ul');
        node.children.forEach(child => renderTree(child, ul));
        li.appendChild(ul);
    } else if (node.type === 'file') {
        li.onclick = () => openFile(node.entry); // 点击打开文件
    }
    parentEl.appendChild(li);
}

flowchart TB
    Start[开始渲染文件树] --> Check{是否有子节点?}
    Check -- 是 --> CreateUL[创建<ul>容器]
    CreateUL --> Loop[遍历每个子节点]
    Loop --> RenderChild[递归调用renderTree]
    RenderChild --> AppendToUL[添加至<ul>]
    AppendToUL --> End
    Check -- 否 --> IsFile{是否为文件?}
    IsFile -- 是 --> AddClick[绑定点击事件]
    AddClick --> End
    IsFile -- 否 --> End

const zipReader = new zip.ZipReader(reader, {
    decodeFileName: (bytes) => new TextDecoder('gbk').decode(bytes)
});

try {
    const content = await entry.getData(writer);
} catch (e) {
    console.warn(`提取 ${entry.filename} 失败:`, e.message);
    showErrorToast(`无法解压 ${entry.filename}`);
}

const zipReader = new zip.ZipReader(reader, {
    onprogress: (index, total) => {
        const percent = Math.round((index / total) * 100);
        updateProgressBar(percent);
    }
});

.progress-bar {
    width: 100%;
    background: #eee;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}
.progress-fill {
    width: var(--width);
    background: #4CAF50;
    height: 100%;
    transition: width 0.3s ease;
}

const zip = new JSZip();
zip.file("hello.txt", "Hello World")
   .folder("images")
   .file("images/cat.jpg", imageData, { base64: true });

const writer = new zip.BlobWriter();
const reader = new zip.BlobReader(blob);
const zipWriter = new zip.ZipWriter(writer);
zipWriter.add("hello.txt", new zip.TextReader("Hello World"))
         .then(() => zipWriter.close());

graph TD
    A[用户触发压缩] --> B{选择库}
    B --> C[JSZip]
    B --> D[Zip.js]
    C --> C1[创建 JSZip 实例]
    C1 --> C2[调用 file() / folder()]
    C2 --> C3[链式构建结构]
    C3 --> C4[generateAsync() 输出 Blob]
    D --> D1[创建 BlobWriter]
    D1 --> D2[初始化 ZipWriter]
    D2 --> D3[add() 添加条目]
    D3 --> D4[close() 完成归档]

npm install jszip

import JSZip from 'jszip';
// 动态导入以减少初始包体积
async function loadJSZip() {
  const module = await import('jszip');
  return new module.default();
}

const zip = new JSZip();
// 添加纯文本文件
zip.file("readme.md", "# 欢迎使用JSZip");
// 添加空目录
const imgFolder = zip.folder("assets/images");
// 向子目录添加文件
imgFolder.file("logo.png", pngData, { binary: true });

if (shouldExcludeLog) {
  zip.remove("debug.log");
}

// 示例：从 Base64 图片创建文件
const base64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...";
const cleaned = base64Image.split(",")[1]; // 移除 data URL 前缀
zip.file("photo.png", cleaned, { base64: true });
// 示例：从 fetch 获取的 ArrayBuffer 添加 PDF
fetch('/report.pdf')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    zip.file("report.pdf", buffer, { binary: true });
  });

zip.generateAsync({
  type: "blob",
  compression: "DEFLATE",
  compressionOptions: { level: 9 }
}).then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "archive.zip";
  a.click();
});

try {
  const blob = await zip.generateAsync({ type: "blob" });
  saveAs(blob, "project.zip"); // 使用 FileSaver.js
} catch (e) {
  console.error("生成失败:", e);
}

const input = document.querySelector("#zip-file");
input.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  const arrayBuffer = await file.arrayBuffer();
  const zip = await JSZip.loadAsync(arrayBuffer);
  console.log(zip.files); // 输出文件列表
});

for (const [filename, zipEntry] of Object.entries(zip.files)) {
  if (zipEntry.dir) continue; // 跳过目录
  const content = await zipEntry.async("text"); // 可选: "text", "binarystring", "arraybuffer"
  console.log(`${filename}: ${content.substring(0, 100)}...`);
}

const isValidFile = (name) =>
  !name.startsWith("__MACOSX/") &&
  !path.basename(name).startsWith(".");
const validFiles = Object.keys(zip.files).filter(isValidFile);

function filterUselessEntries(files) {
  return Object.fromEntries(
    Object.entries(files).filter(([name, entry]) => {
      return !(
        name.includes("__MACOSX") ||
        name.endsWith(".DS_Store") ||
        entry.dir && name.startsWith(".")
      );
    })
  );
}
const cleanFiles = filterUselessEntries(zip.files);

// 方案：先压缩 → 再使用 CryptoJS 加密整个 Blob
import CryptoJS from 'crypto-js';
const blob = await zip.generateAsync({ type: "arraybuffer" });
const wordArray = CryptoJS.lib.WordArray.create(new Uint8Array(blob));
const encrypted = CryptoJS.AES.encrypt(wordArray, "secret-key").toString();
// 下载加密后的数据
const encryptedBlob = new Blob([encrypted], { type: "text/plain" });

zip.generateAsync({
  type: "blob",
  compression: "DEFLATE",
  compressionOptions: {
    level: 6 // 推荐值：6（兼顾速度与压缩率）
  }
})

<input type="file" id="folderInput" webkitdirectory directory multiple />

document.getElementById('folderInput').addEventListener('change', async (e) => {
    const items = e.target.files;
    for (let file of items) {
        const entry = file.webkitRelativePath ? 
            file /* 可直接访问 */ : 
            e.target.webkitEntries?.find(e => e.name === file.name);
        if (entry) {
            console.log('Entry:', entry.name, entry.isDirectory ? 'is dir' : 'is file');
        }
    }
});

function isDirectoryUploadSupported() {
    const input = document.createElement('input');
    return 'webkitdirectory' in input || 'directory' in input;
}
if (!isDirectoryUploadSupported()) {
    alert('当前浏览器不支持文件夹上传，请使用 Chrome/Edge 最新版');
}

function supportsFileSystemEntries(dataTransfer) {
    return Array.from(dataTransfer.items)
        .some(item => item.kind === 'file' && item.webkitGetAsEntry);
}

async function readAllEntries(directoryEntry) {
    const reader = directoryEntry.createReader();
    let entries = [];
    let read;
    do {
        read = await new Promise(resolve => reader.readEntries(resolve));
        entries = entries.concat(Array.from(read));
    } while (read.length > 0);
    return entries;
}

async function buildFileTree(entry, pathPrefix = '') {
    const node = {
        name: entry.name,
        fullPath: pathPrefix + entry.name,
        children: [],
        isDirectory: false,
        size: null
    };
    if (entry.isFile) {
        node.isDirectory = false;
        return new Promise((resolve) =>
            entry.file(file => {
                node.size = file.size;
                resolve(node);
            })
        );
    }
    if (entry.isDirectory) {
        node.isDirectory = true;
        const children = await readAllEntries(entry);
        node.children = await Promise.all(
            children.map(child =>
                buildFileTree(child, node.fullPath + '/')
            )
        );
        return node;
    }
    return node;
}

async function processFilesInBatches(files, processor, batchSize = 10) {
    for (let i = 0; i < files.length; i += batchSize) {
        const batch = files.slice(i, i + batchSize);
        await Promise.all(batch.map(processor));
        // 插入微任务等待，释放主线程
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

// main.js
const worker = new Worker('/workers/zip-worker.js');
worker.postMessage({ action: 'startZip', treeData: fileTree });
worker.onmessage = function(e) {
    if (e.data.blob) {
        const url = URL.createObjectURL(e.data.blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'archive.zip';
        a.click();
    }
};

// workers/zip-worker.js
importScripts('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js');
self.onmessage = async function(e) {
    const zip = new JSZip();
    const addFilesRecursively = (node, parentFolder) => {
        if (node.isDirectory) {
            const folder = parentFolder.folder(node.name);
            node.children.forEach(child => addFilesRecursively(child, folder));
        } else {
            parentFolder.file(node.name, fetch(node.fullPath).then(r => r.arrayBuffer()));
        }
    };
    addFilesRecursively(e.data.treeData, zip);
    const blob = await zip.generateAsync({ type: 'blob' });
    self.postMessage({ blob }, [blob]);
};

function isValidPath(path) {
    const normalized = path.replace(/\\/g, '/').replace(/\.\.\//g, '');
    return !normalized.includes('../') && !normalized.startsWith('/');
}

function clearMemoryCache() {
    globalFileReferences.clear();
    URL.revokeObjectURLs(); // 清理 createObjectURL 创建的所有链接
    caches.delete('local-file-cache'); // 若使用 Cache API
}

const BLOCKED_EXTS = ['.exe', '.bat', '.sh', '.dll', '.ps1', '.cmd'];
function isBlockedFile(file) {
    return BLOCKED_EXTS.some(ext => file.name.toLowerCase().endsWith(ext));
}
// 使用示例
Array.from(input.files).forEach(file => {
    if (isBlockedFile(file)) {
        console.warn(`已阻止加载危险文件: ${file.name}`);
        return;
    }
    // 正常处理流程...
});

async function getMimeType(file) {
    const arr = await file.slice(0, 4).arrayBuffer();
    const view = new Uint8Array(arr);
    const hex = Array.prototype.map.call(view, b => b.toString(16).padStart(2, '0')).join('');
    switch (hex) {
        case '504b0304': return 'application/zip';
        case '89504e47': return 'image/png';
        default: return file.type || 'unknown';
    }
}