当前位置：首页 > 行业动态 > 正文

custom.js 上传图片

admin
行业动态
2025-02-06
2

JavaScript实现图片上传功能的方法及步骤：该文介绍了使用JavaScript实现图片上传的多种方法，包括原生JavaScript、jQuery以及现代前端框架如React、Vue.js等。详细阐述了创建HTML表单、监听文件选择事件、使用FormData对象构建请求数据，以及通过AJAX或fetch API发送数据到服务器的核心步骤。还涉及了文件预览、进度监控、错误处理等最佳实践，为开发者提供了全面的指导。

在现代Web开发中，JavaScript扮演着至关重要的角色，它不仅用于前端的交互逻辑处理，还能通过与后端进行通信实现各种功能，比如上传图片，本文将详细介绍如何使用custom.js文件来实现图片上传功能，包括前端和后端的处理步骤。

一、前端部分：HTML和JavaScript

我们需要一个简单的HTML页面来选择和显示要上传的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Upload</title>
</head>
<body>
    <h1>Upload an Image</h1>
    <input type="file" id="imageInput" accept="image/*">
    <button onclick="uploadImage()">Upload</button>
    <img id="preview" src="#" alt="Image Preview" style="display: none;">
    <script src="custom.js"></script>
</body>
</html>

我们在custom.js文件中编写JavaScript代码来处理图片上传的逻辑。

custom.js 上传图片

document.getElementById('imageInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
            document.getElementById('preview').style.display = 'block';
        }
        reader.readAsDataURL(file);
    }
});
function uploadImage() {
    const fileInput = document.getElementById('imageInput');
    const file = fileInput.files[0];
    if (!file) {
        alert('Please select a file first!');
        return;
    }
    const formData = new FormData();
    formData.append('image', file);
    fetch('/upload', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Image uploaded successfully!');
        } else {
            alert('Failed to upload image.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

二、后端部分：Node.js和Express

在服务器端，我们使用Node.js和Express框架来处理图片上传请求，安装所需的npm包：

npm install express multer

创建一个简单的Express服务器并配置Multer中间件来处理文件上传。

custom.js 上传图片

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;
// 设置存储引擎
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function(req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});
// 初始化上传
const upload = multer({ storage: storage });
app.post('/upload', upload.single('image'), (req, res) => {
    res.json({ success: true });
});
app.listen(port, () => {
    console.log(Server is running on http://localhost:${port});
});

确保在项目根目录下创建一个名为uploads的文件夹，用于存储上传的图片。