如何在PHP环境中加载已上传至服务器的图片并将URL保存至MySQL数据库，解决页面重开后无法显示历史图片的问题

你的代码目前只实现了上传时的实时预览，但页面重新加载后，前端没有从服务器拉取已保存的图片数据，所以看不到历史上传内容。下面是完整的前后端配合解决方案：

问题核心分析 #

当前前端JS仅处理用户选择文件后的即时渲染，没有从后端获取已存储的图片记录。要解决这个问题，需要：

1. 后端从MySQL读取历史图片数据
2. 前端在页面初始化时渲染这些图片
3. 可选：同步删除功能的前后端逻辑

第一步：后端PHP读取已上传图片记录 #

假设你的MySQL表结构如下（可根据实际调整）：

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

在你的PHP页面中添加查询逻辑，将已上传图片数据传递给前端：

<?php
// 替换为你的数据库连接信息
$conn = new mysqli('localhost', 'db_username', 'db_password', 'db_name');
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询已上传的图片记录
$sql = "SELECT filename FROM uploaded_images ORDER BY upload_time DESC";
$result = $conn->query($sql);

$uploadedImages = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        // 假设图片存储在服务器的uploads目录，拼接可访问的URL
        $imageUrl = "uploads/" . $row['filename'];
        $uploadedImages[] = [
            'url' => $imageUrl,
            'name' => $row['filename']
        ];
    }
}
$conn->close();

// 转换为JSON格式供前端使用
$imagesJson = json_encode($uploadedImages);
?>

第二步：前端页面加载时渲染历史图片 #

修改你的JavaScript代码，添加历史图片渲染逻辑：

<!-- 先引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 传递后端的图片数据到前端 -->
<script>
const uploadedImages = <?php echo $imagesJson; ?>;

$(document).ready(function() {
    // 渲染已上传图片的复用函数
    function renderImages(images) {
        images.forEach(image => {
            $("<span class=\"pip\">" +
                "<img class=\"imageThumb\" src=\"" + image.url + "\" title=\"" + image.name + "\"/>" +
                "<br/><span class=\"remove\">Rimuovi</span>" +
            "</span>").insertAfter("#randomImages");
        });
        // 绑定删除按钮事件
        bindRemoveEvents();
    }

    // 绑定删除按钮点击事件（提取为复用函数）
    function bindRemoveEvents() {
        $(".remove").off('click').click(function(){
            const $pip = $(this).parent(".pip");
            const imageName = $pip.find('.imageThumb').attr('title');
            
            // 可选：AJAX通知后端删除文件和数据库记录
            $.post('delete_image.php', {filename: imageName}, function(res) {
                res.success ? $pip.remove() : alert('删除失败');
            }, 'json');
        });
    }

    // 页面加载时先渲染历史图片
    renderImages(uploadedImages);

    // 原有的文件上传预览逻辑
    if (window.File && window.FileList && window.FileReader) {
        $("#randomImages").on("change", function(e) {
            const files = e.target.files;
            for (let i = 0; i < files.length; i++) {
                const f = files[i];
                const fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    const file = e.target;
                    $("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                        "<br/><span class=\"remove\">Rimuovi</span>" +
                    "</span>").insertAfter("#randomImages");
                    bindRemoveEvents(); // 给新预览的图片绑定删除事件
                });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Il browser corrente non supporta il caricamento immagini")
    }
});
</script>

<!-- 你的样式和HTML结构 -->
<style>
input[type="file"] { display: block; }
.imageThumb { max-height: 75px; border: 2px solid; padding: 1px; cursor: pointer; }
.pip { display: inline-block; margin: 10px 10px 0 0; }
.remove { display: block; background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; }
.remove:hover { background: white; color: black; }
</style>

<div class="field" align="left">
    <h3>Carica le immagini</h3>
    <input type="file" id="randomImages" name="randomImages[]" multiple />
</div>

第三步：可选完善删除功能的后端逻辑 #

创建delete_image.php文件，处理前端的删除请求：

<?php
$response = ['success' => false];
if (isset($_POST['filename'])) {
    $filename = $_POST['filename'];
    $filePath = 'uploads/' . $filename;

    // 数据库连接
    $conn = new mysqli('localhost', 'db_username', 'db_password', 'db_name');
    if (!$conn->connect_error) {
        // 删除数据库记录（使用预处理语句防止SQL注入）
        $sql = "DELETE FROM uploaded_images WHERE filename = ?";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("s", $filename);
        if ($stmt->execute()) {
            // 删除服务器上的文件
            if (file_exists($filePath)) unlink($filePath);
            $response['success'] = true;
        }
        $stmt->close();
        $conn->close();
    }
}
echo json_encode($response);
?>

关键注意事项 #

• 确保uploads/目录有正确的读写权限，且能通过网页访问
• 数据库操作使用预处理语句，避免SQL注入风险
• 如果你的图片存储路径与示例不同，需修改$imageUrl和$filePath的拼接逻辑

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