PHP，使用 javascript 进行图片预览，使用 PHP 进行上传

Question

我制作了 PHP 脚本来在上传图片之前预览图片，它简单易读。第一部分是显示图像，然后在按提交按钮后上传图像。我在上传图片时遇到问题，它无法上传。

<?php
if (!empty($_POST["uploadForm"])) {
if (is_uploaded_file($_FILES['userImage']['tmp_name'])) {
    $targetPath = "uploads/".$_FILES['userImage']['name'];
    if (move_uploaded_file($_FILES['userImage']['tmp_name'], $targetPath)) {
        $uploadedImagePath = $targetPath;
    }
  }
}
?>
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="userImage" />
<script>
var loadFile = function(event) {
    var output = document.getElementById('userImage');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {URL.revokeObjectURL(output.src) } // free memory
};
</script>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
   <input type="submit" name="upload" value="Submit" class="btnSubmit">
</form>

Answer 1

您已将输入内容放在表单之外，但它应该在其中：

<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
   <input type="file" accept="image/*" onchange="loadFile(event)">
   <input type="submit" name="upload" value="Submit" class="btnSubmit">
</form>

Answer 2

您的 PHP 代码以及 HTML.

中存在多个逻辑错误

检查表单提交时，您必须检查“上传”（提交按钮的名称）是否在 $_POST 中。
文件上传输入应该在
标签内。
为文件上传字段设置一个名称，我已将其设置为“userImageUpload”，因此您可以从 PHP 中的 $_FILES 访问它。

这是最终代码：

<?php
if (!empty($_POST["upload"])) {
    if (is_uploaded_file($_FILES['userImageUpload']['tmp_name'])) {
        $targetPath = "uploads/" . $_FILES['userImageUpload']['name'];
        if (move_uploaded_file($_FILES['userImageUpload']['tmp_name'], $targetPath)) {
            $uploadedImagePath = $targetPath;
        }
    }
}
?>

<img id="userImage" />
<script>
    var loadFile = function(event) {
        var output = document.getElementById('userImage');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
            URL.revokeObjectURL(output.src)
        } // free memory
    };
</script>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
    <input type="file" accept="image/*" onchange="loadFile(event)" name="userImageUpload">
    <input type="submit" name="upload" value="Submit" class="btnSubmit">
</form>

注意：请确保“上传”文件夹已经存在并且权限也正确。

PHP，使用 javascript 进行图片预览，使用 PHP 进行上传

PHP, Image preview with javascript and uploader by PHP

javascript

php

upload

image