js+选择zip文件上传

基础概念

在前端开发中，使用JavaScript实现文件上传功能通常涉及到HTML的<input>元素与JavaScript的事件处理。选择ZIP文件上传是指允许用户通过网页界面选择一个ZIP格式的文件，并将其上传到服务器。

类型

前端上传：用户在浏览器中选择文件并上传。
后端处理：服务器接收文件并进行相应的处理，如存储、解压等。

应用场景

文件备份：用户可以将重要文件打包上传到服务器进行备份。
软件分发：开发者可以提供ZIP格式的应用程序包供用户下载。
数据交换：在不同系统或平台之间交换数据时，可以使用ZIP文件进行封装。

实现步骤

HTML部分：创建一个文件选择输入框和一个上传按钮。
JavaScript部分：监听文件选择事件，验证文件类型，处理文件上传。

示例代码

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>
</head>
<body>
    <input type="file" id="fileInput" accept=".zip" />
    <button id="uploadButton">上传</button>
    <script src="upload.js"></script>
</body>
</html>

JavaScript (upload.js)

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (!file) {
        alert('请选择一个ZIP文件');
        return;
    }

    if (file.type !== 'application/zip') {
        alert('请选择一个有效的ZIP文件');
        return;
    }

    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功:', data);
        alert('文件上传成功');
    })
    .catch(error => {
        console.error('上传失败:', error);
        alert('文件上传失败');
    });
});

服务器端处理

服务器端需要处理文件上传请求，保存文件并进行相应的处理（如解压）。以下是一个简单的Node.js示例：

Node.js (Express)

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const unzipper = require('unzipper');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    const file = req.file;
    const filePath = path.join(__dirname, file.path);

    fs.createReadStream(filePath)
        .pipe(unzipper.Extract({ path: 'unzipped/' }))
        .on('close', () => {
            res.json({ message: '文件上传并解压成功' });
        })
        .on('error', (err) => {
            res.status(500).json({ message: '文件解压失败', error: err });
        });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});