PHP 和 JS - 上传图片不显示

Question

（我是 php 的一天，所以如果重复，请原谅） 我有将图像上传到网站文件夹中的 uploads/ 目录的代码。这是通过下面给出的 index.html 和 upload.php 完成的，最初来自 PHP - Upload picture and display on page。

但是，我无法根据需要在 html 页面本身上显示图片。它重定向到upload.php，那里没有imageholder。任何帮助如何做到这一点？我的 index.html 工作正常，所以我猜我的 php 设置应该没问题。我跟着this、this 和this 安装和设置了所有东西。

index.html

<!DOCTYPE html>
<html>
<head>
<script language= "javascript" type="text/javascript">
function juploadstop(result){
    console.log(typeof result);
    if(result==0){
        $(".imageholder").html("");
    }
    else if(result!=0){
        $(".imageholder").html("<img src='"+result+"'>");
    }
}
</script>
</head>

<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="imageholder"> <!-- a gif image to show that the process wasn't finished -->
    </div>
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>

和upload.php

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$result = $target_file;
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        $uploadOk = 1;
    } else {
        $uploadOk = 0;
    }
}

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg") {
    // echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}


if ($uploadOk == 0) {
    // echo "Sorry, your file was not uploaded.";
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        $result = $target_file;
    } else {
        $result = 0;
    }
}
?>

<script language="javascript" type="text/javascript">
    window.top.window.juploadstop(<?php echo $result; ?>);
</script>

编辑 1 我添加了

header("Location: index.html");

在 php 部分完成之前到我的 php 代码的末尾，并且它不再重定向。但是，图像仍然不显示。

Answer 1

您可以使用 java 脚本来做到这一点，但没有必要这样做。最简单的方法是使用几行 PHP。将文件名从 index.html 更改为 index.php，以便您可以在该文件中使用 PHP。

关闭表单后，在 index.php 文件中添加以下代码：

<br>
HERE ARE YOUR UPLOADED IMAGES:
<br>
<?php
$dirname = "uploads/";

$images = glob($dirname."*{jpg,png,gif}", GLOB_BRACE);

foreach($images as $image) {
    echo '<img src="'.$image.'" /><br />';
}
?>

<br>

此行将显示上传文件夹中的所有图像。

所以你会有这样的东西：

<!DOCTYPE html>
<html>
<head>
<script language= "javascript" type="text/javascript">
function juploadstop(result){
    console.log(typeof result);
    if(result==0){
        $(".imageholder").html("");
    }
    else if(result!=0){
        $(".imageholder").html("<img src='"+result+"'>");
    }
}
</script>
</head>

<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="imageholder"> <!-- a gif image to show that the process wasn't finished -->
    </div>
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>
<br>
HERE ARE YOUR UPLOADED IMAGES:
<br>
<?php
$dirname = "uploads/";

$images = glob($dirname."*{jpg,png,gif}", GLOB_BRACE);

foreach($images as $image) {
    echo '<img src="'.$image.'" /><br />';
}
?>

<br>

</body>
</html>

您还需要在最后添加 upload.php 文件：

header('Location: index.php');

确保在关闭 PHP 标记之前添加此代码。此行将始终在您的索引页面上重定向您。

希望对你有帮助！

Answer 2

在我看来，您正在尝试从您的 upload.php 调用您的“juploadstop”函数，该函数包含在 index.html 页面中的 JS 中。那是行不通的。 如果你只是想上传和显示一张图片，你甚至不一定需要使用任何 JS。只需为您的目标文件使用一个固定名称，删除您的 JS，在您的 index.html 中添加一个简单的图像标签 <img src="uploads/yourimage.jpg">，然后在您的 PHP 脚本末尾添加一个 header("Location: index.html");，因此一旦处理了上传用户将被引导回索引页面。