js 文件上传|极客笔记

js 文件上传

在网页开发中，文件上传是一项常见的操作。无论是用户上传头像、音乐、视频等文件，都需要使用文件上传功能。本文将详细介绍如何使用 JavaScript 实现文件上传功能。

HTML 文件上传表单

首先，我们需要在 HTML 中创建一个文件上传表单。可以使用 <input type="file"> 元素来实现文件上传功能。以下是一个简单的文件上传表单示例：

<!DOCTYPE html>
<html>
<head>
    <title>文件上传示例</title>
</head>
<body>
    <h2>文件上传</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <button type="submit">上传文件</button>
    </form>
</body>
</html>

在上面的代码中，我们创建了一个简单的文件上传表单，包含一个文件选择框和一个提交按钮。<input type="file" name="file" id="file"> 提供了一个文件选择框，供用户选择要上传的文件。<button type="submit">上传文件</button> 是一个提交按钮，点击后将触发提交操作。

使用 JavaScript 处理文件上传

接下来，我们需要使用 JavaScript 来处理文件上传的操作。我们可以通过监听表单的提交事件来实现文件上传功能。以下是一个基本的 JavaScript 实现文件上传的示例：

<!DOCTYPE html>
<html>
<head>
    <title>文件上传示例</title>
</head>
<body>
    <h2>文件上传</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <button type="submit">上传文件</button>
    </form>

    <script>
        const uploadForm = document.getElementById('uploadForm');
        const fileInput = document.getElementById('file');

        uploadForm.addEventListener('submit', (e) => {
            e.preventDefault();

            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);

            fetch('http://example.com/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                console.log('文件上传成功');
            })
            .catch(error => {
                console.error('文件上传失败', error);
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们首先获取了表单元素和文件选择框的引用。然后，我们监听了表单的提交事件，阻止默认提交行为，并通过 FormData 构造函数创建了一个包含要上传文件的 FormData 对象。最后，我们使用 fetch API 发起了一个 POST 请求，将选择的文件作为请求体发送到服务器。

服务器端接收文件

在实际项目中，我们需要在服务器端接收并处理上传的文件。以下是一个简单的 Node.js 示例，演示如何使用 Express 框架处理文件上传：

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

app.post('/upload', upload.single('file'), (req, res) => {
    const file = req.file;
    res.send('文件上传成功：' + file.originalname);
});

app.listen(3000, () => {
    console.log('服务器已启动');
});

在上面的代码中，我们首先使用 Express 创建了一个简单的服务器。使用 multer 中间件来处理文件上传，设置文件上传的目标路径为 uploads/。然后我们定义了一个路由 /upload，使用 upload.single('file') 中间件来处理文件上传，上传的文件将存储在 req.file 对象中。最后返回上传成功的消息给客户端。