PHP，使用 javascript 的图像预览和 PHP 的上传器答案

【问题标题】：PHP, Image preview with javascript and uploader by PHPPHP，使用 javascript 的图像预览和 PHP 的上传器
【发布时间】：2020-08-21 04:03:52
【问题描述】：

我制作了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>

【问题讨论】：

标签： javascript php image upload

【解决方案1】：

您的 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>

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

【讨论】：

【解决方案2】：

您已将输入置于表单之外，但它应该在其中：

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

【讨论】：