使用 HTML 和 Node.js 创建文件夹-html教程-PHP中文网

使用 HTML 和 Node.js 创建文件夹

霞舞

发布： 2025-08-13 18:22:01

原创

382人浏览过

使用 html 和 node.js 创建文件夹

本文将解释为什么直接在浏览器端使用 fs 模块创建文件夹不可行，并提供一种基于客户端-服务器架构的解决方案，即使在本地环境中也能实现类似的功能。

在 Web 开发中，经常会遇到需要在服务器端创建文件夹的需求。虽然 Node.js 提供了 fs 模块来操作文件系统，但直接在浏览器端的 JavaScript 代码中使用 fs 模块是不可能的。这是因为浏览器运行环境与 Node.js 运行环境存在本质区别。

浏览器环境 vs. Node.js 环境

浏览器环境是运行在用户客户端的，主要负责渲染网页和处理用户交互。出于安全考虑，浏览器对 JavaScript 的权限进行了严格限制，不允许直接访问本地文件系统。

立即学习“前端免费学习笔记（深入）”；

Node.js 环境则是一个服务器端的 JavaScript 运行环境，它提供了完整的操作系统 API 访问能力，包括文件系统操作。

因此，试图在浏览器端使用 require("fs") 引入 fs 模块会失败，因为浏览器根本不认识 require 语法，并且即使引入成功，fs 模块的功能也无法在浏览器环境中正常工作。

客户端-服务器架构解决方案

要实现在网页上点击按钮，通过 Node.js 创建文件夹的功能，必须采用客户端-服务器架构。具体步骤如下：

前端 (HTML + JavaScript):
- 创建一个 HTML 页面，包含一个输入框和一个按钮。
- 使用 JavaScript 监听按钮的点击事件。
- 当按钮被点击时，获取输入框中的文件夹名称。
- 通过 fetch 或 XMLHttpRequest 将文件夹名称发送到 Node.js 服务器。
后端 (Node.js):
- 创建一个 Node.js 服务器，监听特定的端口。
- 接收来自前端的请求，获取文件夹名称。
- 使用 fs.mkdirSync() 创建文件夹。
- 向前端返回创建结果。

示例代码

以下是一个简单的示例代码，展示了如何使用 Node.js 和 HTML 实现创建文件夹的功能：

index.html (前端)

<!DOCTYPE html>
<html>
<head>
    <title>Create Folder</title>
</head>
<body>
    <input type="text" id="folderName" placeholder="Folder Name">
    <button id="createFolderBtn">Create Folder</button>

    <script>
        const createFolderBtn = document.getElementById('createFolderBtn');
        createFolderBtn.addEventListener('click', () => {
            const folderName = document.getElementById('folderName').value;
            fetch('/createFolder', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ folderName: folderName })
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message); // 显示创建结果
            });
        });
    </script>
</body>
</html>

登录后复制

server.js (后端)

const http = require('http');
const fs = require('fs');
const url = require('url');

const server = http.createServer((req, res) => {
    const parsedUrl = url.parse(req.url, true);

    if (req.method === 'POST' && parsedUrl.pathname === '/createFolder') {
        let body = '';
        req.on('data', chunk => {
            body += chunk.toString();
        });
        req.on('end', () => {
            try {
                const data = JSON.parse(body);
                const folderName = data.folderName;
                const folderPath = './' + folderName; // 创建在服务器当前目录下

                if (!fs.existsSync(folderPath)) {
                    fs.mkdirSync(folderPath);
                    res.writeHead(200, { 'Content-Type': 'application/json' });
                    res.end(JSON.stringify({ message: 'Folder created successfully!' }));
                } else {
                    res.writeHead(400, { 'Content-Type': 'application/json' });
                    res.end(JSON.stringify({ message: 'Folder already exists!' }));
                }

            } catch (error) {
                res.writeHead(500, { 'Content-Type': 'application/json' });
                res.end(JSON.stringify({ message: 'Error creating folder: ' + error.message }));
            }
        });
    } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

const port = 3000;
server.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

登录后复制

运行步骤: