PHP上传图片后点击处理按钮图片被清空，如何在右侧aside显示内容？

问题根因 #

当前页面有两个独立的POST表单，点击process按钮提交第二个表单时，页面会整体刷新，此时判断图片渲染的$_POST['submits']参数不存在，左侧区域的图片渲染逻辑不会触发，因此已上传的图片会消失。同时你原有代码还存在两个小问题：一是图片存储路径拼接时缺少目录分隔符，会导致图片直接存在images目录而非upload子目录；二是右侧aside区域多了多余的</div>标签，HTML结构不规范。

可行实现方案 #

方案1：单表单+SESSION存储（改造成本最低，无需写JS）

合并两个表单为一个，上传成功后把图片路径存在SESSION中，页面刷新时直接从SESSION读取路径渲染图片，不需要依赖单次POST参数判断。

方案2：AJAX异步提交（用户体验更好）

上传图片和点击process按钮都采用AJAX异步提交请求，页面不需要整体刷新，自然不会清空已经渲染好的内容。

改后可直接运行的示例代码（基于方案1） #

<?php session_start(); // 页面最顶部先开启SESSION ?>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="row">
<aside id="left">
    <form action="" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="file_to_upload" id="file_to_upload">
    <input type="submit" name="submits" id="upload_button" value="upload">
    <input type="submit" name="process_button" id="process_button" value="process">
</form>

<div id="uploaded_pic">
<?php
// 处理上传逻辑
if(isset($_POST['submits']))
{ 
    $filepath = "images/upload/" . $_FILES["file_to_upload"]["name"];
    // 自动创建存储目录
    if(!is_dir('images/upload')){
        mkdir('images/upload', 0777, true);
    }
    if(move_uploaded_file($_FILES["file_to_upload"]["tmp_name"], $filepath)) 
    {
        $_SESSION['uploaded_img'] = $filepath; // 上传成功后路径存SESSION
        echo "<img src=".$filepath." height=640 width=480 />";
    } 
    else 
    {
        echo "Problem uploading";
    }
}
// 提交process按钮、或者页面刷新时，直接从SESSION读路径渲染图片
elseif(isset($_SESSION['uploaded_img'])){
    echo "<img src=".$_SESSION['uploaded_img']." height=640 width=480 />";
}
?>
</div>
</aside>

<aside id="right">
<?php
    if (isset($_POST['process_button']))
    {
        echo "hello";
    }
?>
</aside>
</div>
</body>
</html>

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