如何实现图片上传功能中仅显示单张图片？

问题原因 #

• 图片堆叠：每次点击上传都会向image表插入新记录，页面渲染时查询所有记录并全部展示，导致新旧图片叠加显示。
• 刷新不清除：图片数据持久存储在数据库中，刷新页面会重新读取所有历史记录，因此不会自动清除。

解决方案 #

方案1：单图上传（替换模式） #

如果需求是每个会话仅保留一张图片，上传新图自动替换旧图：

1. 先给image表添加会话关联字段，用来区分不同用户的图片：

ALTER TABLE image ADD COLUMN session_id VARCHAR(255);

2. 修改PHP上传与查询逻辑：

<?php
include 'config.php';
session_start();
// 其他原有代码...

if(isset($_POST['upload'])){
    $sessionId = session_id();
    // 删除当前会话的旧图片记录
    $deleteSql = "DELETE FROM image WHERE session_id = '$sessionId'";
    mysqli_query($conn, $deleteSql);
    
    $filename = $_FILES['uploadfile']['name'];
    $tempname = $_FILES['uploadfile']['tmp_name'];
    $folder = "./image/".$filename;

    // 插入新图片并关联会话ID
    $sql3 = "INSERT INTO image(filename, session_id) VALUES('$filename', '$sessionId')";
    mysqli_query($conn,$sql3);
    move_uploaded_file($tempname,$folder);
    
    header('Location: feedback.php');
    exit;
}

// 查询图片时仅加载当前会话的图片
$query = "SELECT * FROM image WHERE session_id = '".session_id()."'";
$result = mysqli_query($conn,$query);
?>

方案2：临时前端预览（不提前存数据库） #

如果图片是反馈表单的附件，无需提前存入数据库，可合并到反馈提交流程：

1. 移除单独的upload按钮和数据库插入逻辑，把图片字段和反馈一起提交。
2. 用JS实现前端预览，仅显示当前选择的图片：

<!-- 在文件输入框后添加预览容器 -->
<div id="image-preview" class="mt-2"></div>

<script>
document.querySelector('input[name="uploadfile"]').addEventListener('change', function(e) {
    const preview = document.getElementById('image-preview');
    preview.innerHTML = ''; // 清空旧预览
    const file = e.target.files[0];
    if (file) {
        const img = document.createElement('img');
        img.src = URL.createObjectURL(file);
        img.style.maxWidth = '200px';
        preview.appendChild(img);
    }
});
</script>

3. 修改PHP，在submit反馈时处理图片上传：

if (isset($_POST['submit'])) {
    // 原有反馈插入代码...
    
    // 处理图片上传
    if(isset($_FILES['uploadfile']) && $_FILES['uploadfile']['error'] == 0){
        $filename = $_FILES['uploadfile']['name'];
        $tempname = $_FILES['uploadfile']['tmp_name'];
        $folder = "./image/".$filename;
        move_uploaded_file($tempname,$folder);
        // 可将图片名存入feedback表关联
        $updateSql = "UPDATE feedback SET image = '$filename' WHERE email = '$email'";
        mysqli_query($conn, $updateSql);
    }
    
    header('location: feedback.php');
    exit;
}

方案3：添加手动清除按钮 #

如果需要保留多图但支持手动清除：

1. 在HTML的图片展示区后添加清除按钮：

<div class="form-group mt-2">
    <button class="btn btn-danger" type="submit" name="clear_images">清除所有图片</button>
</div>

2. 添加PHP处理逻辑：

if(isset($_POST['clear_images'])){
    $sessionId = session_id();
    // 删除当前会话的图片记录
    $deleteSql = "DELETE FROM image WHERE session_id = '$sessionId'";
    mysqli_query($conn, $deleteSql);
    
    // 可选：删除服务器上的图片文件
    $files = glob("./image/*");
    foreach($files as $file){
        if(is_file($file)) unlink($file);
    }
    
    header('Location: feedback.php');
    exit;
}

重要安全提醒 #

原代码存在严重的SQL注入风险，所有用户输入直接拼入SQL语句极易被攻击，必须使用预处理语句，示例：

// 替换原有feedback插入代码
$stmt = $conn->prepare("INSERT INTO feedback(email,name,contact,category,feedback) VALUES(?,?,?,?,?)");
$stmt->bind_param("sssss", $email, $name, $contact, $category, $feedback);
$stmt->execute();
$stmt->close();

内容的提问来源于stack exchange，提问作者El33m