功能目标
在前端实现 ZIP 压缩包的解析，将文件名通过下拉框展示，并支持查看所选文件的内容。
使用技术
- JSZip：解析 ZIP 文件的库。
- FileReader：读取用户上传的文件。
- 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);
});
功能说明
-
文件上传与解析：
- 通过文件选择框上传 ZIP 文件。
- 使用
FileReader将文件内容读取为二进制数据。
-
解析文件名：
- 用
JSZip.loadAsync加载 ZIP 文件。 - 遍历 ZIP 文件的内容，提取文件名，并动态填充下拉框。
- 用
-
查看文件内容：
- 用户从下拉框中选择文件后，点击 "查看内容" 按钮。
- 使用
zip.file(fileName).async('text')读取选定文件的内容并显示。
示例效果
假如上传的 ZIP 包包含以下文件：
example.txtdata.jsonimages/photo.jpg
操作步骤：
- 上传 ZIP 文件，点击 解析 按钮。
- 下拉框显示：
example.txt data.json images/photo.jpg - 从下拉框中选择
example.txt，点击 查看内容。 - 页面展示内容：
文件名：example.txt 内容： 示例文本文件内容
扩展功能
- 文件类型过滤：限制下拉框只显示特定类型的文件（如
.txt或.json）。 - 文件下载：使用
Blob和URL.createObjectURL，允许用户下载解压后的文件。 - 预览非文本文件：对于图片等文件，可以用
<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>