当前位置:首页 > PHP

php实现表情上传

2026-02-15 18:57:26PHP

实现表情上传功能

前端部分 HTML表单需要设置enctype="multipart/form-data"以支持文件上传

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="emoji" accept="image/*">
    <button type="submit">上传表情</button>
</form>

后端处理 PHP接收文件并验证处理

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $targetDir = "uploads/emojis/";
    $allowedTypes = ['image/png', 'image/jpeg', 'image/gif'];

    $file = $_FILES['emoji'];
    $fileType = $file['type'];
    $fileSize = $file['size'];

    // 验证文件类型
    if (!in_array($fileType, $allowedTypes)) {
        die("只允许上传PNG,JPEG,GIF格式的图片");
    }

    // 验证文件大小(示例限制为1MB)
    if ($fileSize > 1048576) {
        die("文件大小不能超过1MB");
    }

    // 生成唯一文件名
    $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
    $newFilename = uniqid() . '.' . $extension;
    $targetPath = $targetDir . $newFilename;

    // 移动文件到目标目录
    if (move_uploaded_file($file['tmp_name'], $targetPath)) {
        echo "表情上传成功!";
    } else {
        echo "上传失败,请重试";
    }
}
?>

安全注意事项

确保上传目录有正确的权限设置

// 设置上传目录权限
if (!is_dir($targetDir)) {
    mkdir($targetDir, 0755, true);
}

// 防止目录遍历攻击
$targetPath = realpath($targetDir) . DIRECTORY_SEPARATOR . $newFilename;
if (strpos($targetPath, realpath($targetDir)) !== 0) {
    die("非法文件路径");
}

数据库存储(可选)

如果需要记录上传信息,可以建立数据库表存储文件信息

CREATE TABLE emojis (
    id INT AUTO_INCREMENT PRIMARY KEY,
    filename VARCHAR(255) NOT NULL,
    upload_time DATETIME DEFAULT CURRENT_TIMESTAMP,
    user_id INT
);

PHP插入数据库记录

// 假设已建立数据库连接$pdo
$stmt = $pdo->prepare("INSERT INTO emojis (filename, user_id) VALUES (?, ?)");
$stmt->execute([$newFilename, $_SESSION['user_id']]);

显示上传的表情

从目录读取并显示表情图片

$emojis = glob($targetDir . "*.{png,jpg,jpeg,gif}", GLOB_BRACE);
foreach ($emojis as $emoji) {
    echo '<img src="' . htmlspecialchars($emoji) . '" style="width:50px;height:50px;">';
}

php实现表情上传

标签: 表情上传
分享给朋友:

相关文章

vue实现头像上传

vue实现头像上传

Vue 头像上传实现方法 使用 <input type="file"> 基础方法 创建文件输入控件并监听 change 事件: <template> <div>…

vue实现上传视频

vue实现上传视频

使用 <input type="file"> 实现基础上传 通过 HTML 原生文件选择控件获取视频文件,结合 Vue 处理上传逻辑。 <template> <…

vue实现上传进度

vue实现上传进度

Vue 实现文件上传进度 在 Vue 中实现文件上传进度可以通过 XMLHttpRequest 或 axios 的 onUploadProgress 事件来监听上传进度。以下是两种常见实现方式: 使…

vue用户实现头像上传

vue用户实现头像上传

前端实现头像上传(Vue + Element UI) 环境准备 确保项目已安装element-ui和axios(或其他HTTP库): npm install element-ui axios 组件…

vue java实现分片上传

vue java实现分片上传

分片上传的实现原理 分片上传是将大文件分割成多个小块分别上传,最后在服务器合并的技术。这种方式能解决大文件上传超时、网络不稳定等问题,同时支持断点续传。 前端Vue实现 前端需要使用File AP…

vue实现上传头像显示

vue实现上传头像显示

Vue 实现上传头像并显示 前端实现(Vue 3 + Element Plus) 模板部分 <template> <div class="avatar-upload">…