原生 JS 实现图片上传
最新回答
蘇瑾熙
2026-04-01 06:48:12
原生 JavaScript 实现图片上传功能通常包括前端图片选择、预览和上传到服务器的过程。以下是一个简单的实现示例，包括 HTML、CSS 和 JavaScript 代码。
HTML 部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片上传示例</title> <style> .upload-container { max-width: 500px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; text-align: center; } #preview { max-width: 100%; max-height: 300px; margin-top: 10px; } #fileInput { display: none; } .upload-btn { display: inline-block; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } .upload-btn:hover { background-color: #0056b3; } </style></head><body> <div class="upload-container"> <h2>图片上传</h2> <input type="file" id="fileInput" accept="image/*"> <button class="upload-btn" id="selectBtn">选择图片</button> <div> <img id="preview" src="#" alt="预览图片"> </div> <button class="upload-btn" id="uploadBtn" disabled>上传图片</button> </div> <script src="upload.js"></script></body></html>JavaScript 部分 (upload.js)document.addEventListener('DOMContentLoaded', function() { const fileInput = document.getElementById('fileInput'); const selectBtn = document.getElementById('selectBtn'); const uploadBtn = document.getElementById('uploadBtn'); const preview = document.getElementById('preview'); selectBtn.addEventListener('click', function() { fileInput.click(); }); fileInput.addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(event) { preview.src = event.target.result; uploadBtn.disabled = false; }; reader.readAsDataURL(file); } }); uploadBtn.addEventListener('click', function() { const file = fileInput.files[0]; if (!file) return; const formData = new FormData(); formData.append('image', file); const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { alert('图片上传成功！'); preview.src = '#'; uploadBtn.disabled = true; fileInput.value = ''; } else { alert('上传失败，请重试。'); } }; xhr.send(formData); });});后端部分 (Node.js)以下是一个简单的 Node.js 服务器代码，用于接收上传的图片并保存到本地。
const express = require('express');const multer = require('multer');const path = require('path');const app = express();const port = 3000;// 配置 multer 存储const storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, 'uploads/'); }, filename: function(req, file, cb) { cb(null, Date.now() + path.extname(file.originalname)); }});const upload = multer({ storage: storage });// 创建上传目录const fs = require('fs');const uploadDir = 'uploads';if (!fs.existsSync(uploadDir)) { fs.mkdirSync(uploadDir);}app.use(express.static('public'));app.post('/upload', upload.single('image'), (req, res) => { if (!req.file) { return res.status(400).send('没有上传文件'); } res.send('文件上传成功');});app.listen(port, () => { console.log(`服务器运行在http://localhost:
${port}`);});说明前端部分：
使用 input 元素让用户选择图片文件。
使用 FileReader 读取并预览选择的图片。
使用 XMLHttpRequest 或 fetch API 上传图片到服务器。
后端部分：
使用 Express 框架和 multer 中间件处理文件上传。
上传的文件保存在 uploads 目录中。
运行步骤：
确保安装了 Node.js 和 npm。
创建一个项目目录，初始化 package.json (npm init -y)。
安装必要的依赖 (npm install express multer)。
创建上述的服务器代码文件（如 server.js）。
创建 public 目录并将 HTML 文件放入其中。
运行服务器 (node server.js)。
在浏览器中访问
http://localhost:3000。
这个示例提供了一个完整的图片上传流程，包括前端的选择、预览和上传，以及后端的接收和保存。
热门标签
