PHP图片上传后无法在HTML表单自动显示问题求助

我正在学习PHP，制作图片上传表单时遇到问题：上传图片后无法自动在HTML表单中显示。文件上传本身没有问题，怀疑问题出在HTML中的PHP代码部分，另外想询问是否需要填写完整路径才能正常工作？

我的HTML表单代码 #

<!DOCTYPE html>
<html>
<head>
<style>
table{
      border: 1px solid black;
      margin: auto;
      margin-top: 150px;
      width: 280px;
      height: 130px;
      display: flex;
}
</style>
</head>
<body>
<table>
<form action="upload.php" method="post" enctype="multipart/form-data">
<tr>
<td>上传你的图片</td>
</tr>
<tr>
<td>
<input type="file" name="file" accept="png,jpg,jpeg">
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="upload">
</td>
</tr>
    <?php
    if (!empty($uploaded_image)) {
        echo '<img src="' . $uploaded_image . '" alt="Uploaded Image" style="width: 300px; height: auto;">';
    }
    ?>
</form>
</table>
</body>
</html>

我的PHP脚本代码（upload.php） #

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

if(isset($_POST["submit"])){
    $target_dir="upl/";
    $target_file=$target_dir.basename($_FILES["file"]["name"]);
    $uploadOk=1;
    $image=pathinfo($target_file,PATHINFO_EXTENSION);

    $check=getimagesize($_FILES["file"]["tmp_name"]);
    if($check!==false){
        echo"文件是图片 " .$check["mime"]."<br>";
        $uploadOk=1;
    }else{
        echo"该文件不是图片<br>";
        $uploadOk=0;
    }
    if(file_exists($target_file)){
        echo"你上传的图片已存在<br>";
        $uploadOk=0;
    }
    if($image!=="jpg"&&$image!=="png"&&$image!=="jpeg"&&$image!=="gif"){
        echo"不支持该图片格式，仅支持jpg,png,jpeg,gif<br>";
        $uploadOk=0;
    }
    if($_FILES["file"]["size"]>500000){
        echo"文件过大<br>";
        $uploadOk=0;
    }
    if($uploadOk==0){
        echo"<span style=color: red;>文件上传失败<br>";
    }else{
        if(move_uploaded_file($_FILES["file"]["tmp_name"],$target_file)){
            $uploaded_image = $target_file;
            echo"<span style=color: green;>文件 " . basename($_FILES["file"]["name"])." 上传成功<br>";
        }else{
            echo"<span style=color: red;>文件上传失败";
        }
    }
}
?>

问题原因及解决方法 #

核心问题：变量作用域不共享 #

HTML页面里的$uploaded_image变量和upload.php里的变量不在同一个执行上下文。表单提交后会跳转到upload.php，upload.php里定义的$uploaded_image无法传递回原HTML页面，所以HTML里的判断永远不会生效。

路径问题说明 #

不需要填写完整绝对路径，只要相对路径正确即可。upl/作为相对路径，只要该目录和当前执行的PHP文件在同一级，并且目录存在、服务器有写入权限，就可以正常工作。

修复方案：合并代码到同一文件 #

把HTML表单和PHP处理逻辑放在同一个文件中，让变量可以共享，具体修改后的代码如下：

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 初始化变量
$uploaded_image = '';

if(isset($_POST["submit"])){
    $target_dir="upl/";
    $target_file=$target_dir.basename($_FILES["file"]["name"]);
    $uploadOk=1;
    $image=pathinfo($target_file,PATHINFO_EXTENSION);

    $check=getimagesize($_FILES["file"]["tmp_name"]);
    if($check!==false){
        echo"文件是图片 " .$check["mime"]."<br>";
        $uploadOk=1;
    }else{
        echo"该文件不是图片<br>";
        $uploadOk=0;
    }
    if(file_exists($target_file)){
        echo"你上传的图片已存在<br>";
        $uploadOk=0;
    }
    if($image!=="jpg"&&$image!=="png"&&$image!=="jpeg"&&$image!=="gif"){
        echo"不支持该图片格式，仅支持jpg,png,jpeg,gif<br>";
        $uploadOk=0;
    }
    if($_FILES["file"]["size"]>500000){
        echo"文件过大<br>";
        $uploadOk=0;
    }
    if($uploadOk==0){
        echo"<span style=color: red;>文件上传失败<br>";
    }else{
        if(move_uploaded_file($_FILES["file"]["tmp_name"],$target_file)){
            $uploaded_image = $target_file;
            echo"<span style=color: green;>文件 " . basename($_FILES["file"]["name"])." 上传成功<br>";
        }else{
            echo"<span style=color: red;>文件上传失败";
        }
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
table{
    border: 1px solid black;
    margin: auto;
    margin-top: 150px;
    width: 280px;
    height: 130px;
    display: flex;
}
</style>
</head>
<body>
<table>
<!-- 表单提交到当前页面，action留空 -->
<form action="" method="post" enctype="multipart/form-data">
<tr>
<td>上传你的图片</td>
</tr>
<tr>
<td>
<input type="file" name="file" accept="png,jpg,jpeg">
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="upload">
</td>
</tr>
<?php
// 现在可以读取到同一作用域的$uploaded_image变量
if (!empty($uploaded_image)) {
    echo '<img src="' . $uploaded_image . '" alt="Uploaded Image" style="width: 300px; height: auto;">';
}
?>
</form>
</table>
</body>
</html>

修改要点： #

1. 将PHP逻辑移到页面顶部，初始化$uploaded_image变量
2. 表单的action属性留空，提交到当前页面
3. 上传成功后，$uploaded_image变量会被赋值，HTML部分就能读取并显示图片

额外注意事项 #

• 确保upl/目录存在，若不存在需手动创建
• 给upl/目录设置正确的权限，比如通过命令chmod 755 upl赋予服务器写入权限

内容的提问来源于stack exchange，提问作者Γεωργιος Παπαδοπουλος