js实现网页替换头像的功能

基础概念

网页替换头像的功能通常涉及到前端JavaScript与后端服务器的交互。前端负责用户界面的展示和交互，后端负责处理头像图片的上传和存储。

类型

上传新头像：用户选择新的图片文件进行上传。
预览头像：在上传前可以预览图片效果。
即时更新：上传后立即在页面上显示新头像。

应用场景

社交媒体平台：用户可以随时更换个人资料的头像。
在线论坛或社区：用户可以更改自己的头像以展示个性。
企业内部系统：员工可以更新自己的工作头像。

实现步骤及示例代码

前端部分

HTML结构：

<input type="file" id="avatarUpload" accept="image/*">
<img id="avatarPreview" src="default-avatar.jpg" alt="Avatar Preview">

JavaScript代码：

document.getElementById('avatarUpload').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('avatarPreview').src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

后端部分（Node.js示例）

安装依赖：

npm install express multer

服务器代码：

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
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 });

app.post('/upload-avatar', upload.single('avatar'), (req, res) => {
    res.send({ message: 'File uploaded successfully', filename: req.file.filename });
});

app.listen(3000, () => console.log('Server started on port 3000'));