JS实现 ZIP 压缩包的导入解析

功能目标

在前端实现 ZIP 压缩包的解析,将文件名通过下拉框展示,并支持查看所选文件的内容。


使用技术

  1. JSZip:解析 ZIP 文件的库。
  2. FileReader:读取用户上传的文件。
  3. HTML 和 JavaScript:实现交互和动态内容展示。

实现步骤

1. 引入 JSZip

通过 CDN 或 npm 引入 JSZip:

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

2. 编写 HTML 页面

提供文件上传按钮、解析按钮、下拉框选择,以及用于展示文件内容的区域。

HTML 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZIP 文件解析</title>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #output {
            margin-top: 20px;
            white-space: pre-wrap;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>ZIP 文件解析示例</h1>
    <input type="file" id="zipFile" accept=".zip" />
    <button id="parseBtn">解析</button>

    <div id="fileContainer" style="display: none;">
        <label for="fileList">选择文件:</label>
        <select id="fileList"></select>
        <button id="viewContent">查看内容</button>
    </div>

    <h3>文件内容:</h3>
    <div id="output">请选择 ZIP 文件后解析查看文件内容。</div>
    <script src="app.js"></script>
</body>
</html>

3. 编写解析逻辑

app.js 文件中实现 ZIP 解析的功能:

document.getElementById('parseBtn').addEventListener('click', async () => {
    const fileInput = document.getElementById('zipFile');
    const fileContainer = document.getElementById('fileContainer');
    const fileList = document.getElementById('fileList');
    const output = document.getElementById('output');
    output.textContent = ''; // 清空输出内容
    fileList.innerHTML = ''; // 清空下拉列表内容

    if (!fileInput.files.length) {
        alert('请选择一个 ZIP 文件');
        return;
    }

    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = async (e) => {
        try {
            const zip = await JSZip.loadAsync(e.target.result);

            // 遍历文件并填充下拉框
            zip.forEach((relativePath, zipEntry) => {
                const option = document.createElement('option');
                option.value = relativePath;
                option.textContent = relativePath;
                fileList.appendChild(option);
            });

            // 显示文件选择部分
            fileContainer.style.display = 'block';
            output.textContent = 'ZIP 文件解析成功!请选择文件查看内容。';

            // 添加查看内容按钮的逻辑
            document.getElementById('viewContent').addEventListener('click', async () => {
                const selectedFile = fileList.value;
                if (zip.file(selectedFile)) {
                    const content = await zip.file(selectedFile).async('text');
                    output.textContent = `文件名:${selectedFile}\n\n内容:\n${content}`;
                } else {
                    output.textContent = `无法读取文件:${selectedFile}`;
                }
            });
        } catch (err) {
            console.error('解析 ZIP 文件失败:', err);
            alert('解析 ZIP 文件失败');
        }
    };

    reader.readAsArrayBuffer(file);
});

功能说明

  1. 文件上传与解析

    • 通过文件选择框上传 ZIP 文件。
    • 使用 FileReader 将文件内容读取为二进制数据。
  2. 解析文件名

    • JSZip.loadAsync 加载 ZIP 文件。
    • 遍历 ZIP 文件的内容,提取文件名,并动态填充下拉框。
  3. 查看文件内容

    • 用户从下拉框中选择文件后,点击 "查看内容" 按钮。
    • 使用 zip.file(fileName).async('text') 读取选定文件的内容并显示。

示例效果

假如上传的 ZIP 包包含以下文件:

  • example.txt
  • data.json
  • images/photo.jpg

操作步骤:

  1. 上传 ZIP 文件,点击 解析 按钮。
  2. 下拉框显示:
    example.txt
    data.json
    images/photo.jpg
    
  3. 从下拉框中选择 example.txt,点击 查看内容
  4. 页面展示内容:
    文件名:example.txt
    
    内容:
    示例文本文件内容
    

扩展功能

  1. 文件类型过滤:限制下拉框只显示特定类型的文件(如 .txt.json)。
  2. 文件下载:使用 BlobURL.createObjectURL,允许用户下载解压后的文件。
  3. 预览非文本文件:对于图片等文件,可以用 <img> 标签显示内容。

点击查看示例HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZIP 文件解析</title>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #output {
            margin-top: 20px;
            white-space: pre-wrap;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>ZIP 文件解析示例</h1>
    <input type="file" id="zipFile" accept=".zip" />
    <button id="parseBtn">解析</button>

    <div id="fileContainer" style="display: none;">
        <label for="fileList">选择文件:</label>
        <select id="fileList"></select>
        <button id="viewContent">查看内容</button>
    </div>

    <h3>文件内容:</h3>
    <div id="output">请选择 ZIP 文件后解析查看文件内容。</div>

    <script>
        document.getElementById('parseBtn').addEventListener('click', async () => {
            const fileInput = document.getElementById('zipFile');
            const fileContainer = document.getElementById('fileContainer');
            const fileList = document.getElementById('fileList');
            const output = document.getElementById('output');
            output.textContent = ''; // 清空输出内容
            fileList.innerHTML = ''; // 清空下拉列表内容

            if (!fileInput.files.length) {
                alert('请选择一个 ZIP 文件');
                return;
            }

            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = async (e) => {
                try {
                    const zip = await JSZip.loadAsync(e.target.result);

                    // 遍历文件并填充下拉框
                    zip.forEach((relativePath, zipEntry) => {
                        const option = document.createElement('option');
                        option.value = relativePath;
                        option.textContent = relativePath;
                        fileList.appendChild(option);
                    });

                    // 显示文件选择部分
                    fileContainer.style.display = 'block';
                    output.textContent = 'ZIP 文件解析成功!请选择文件查看内容。';

                    // 添加查看内容按钮的逻辑
                    document.getElementById('viewContent').addEventListener('click', async () => {
                        const selectedFile = fileList.value;
                        if (zip.file(selectedFile)) {
                            const content = await zip.file(selectedFile).async('text');
                            output.textContent = `文件名:${selectedFile}\n\n内容:\n${content}`;
                        } else {
                            output.textContent = `无法读取文件:${selectedFile}`;
                        }
                    });
                } catch (err) {
                    console.error('解析 ZIP 文件失败:', err);
                    alert('解析 ZIP 文件失败');
                }
            };

            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>

posted @   槑孒  阅读(411)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
历史上的今天:
2023-11-27 geoserver指定JAVA_HOME路径
点击右上角即可分享
微信分享提示