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 and 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

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

Answer 2

您可以使用 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 标签之前添加此内容 there.This 行将始终在您的索引页上重定向您。

希望对您有所帮助！

PHP 和 JS - 上传图片未显示

PHP and JS - upload picture not showing

html

javascript

php

file-upload

image-uploading