当前位置：首页 > 文章列表 > 文章 > 前端 > 用HTML和Node.js创建文件夹方法

用HTML和Node.js创建文件夹方法

2025-08-20 10:00:31 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《用HTML和Node.js创建文件夹教程》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

使用 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>
    &lt;input type=&quot;text&quot; id=&quot;folderName&quot; placeholder=&quot;Folder Name&quot;&gt;
    <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}`);
});

运行步骤: