PHP，使用 javascript 进行图像预览并通过 PHP 上传

Question

我编写了 PHP 脚本来在上传图像之前预览图像，该脚本简单易读。第一部分是显示图像，然后在按“提交”按钮后上传图像。我在上传图片时遇到问题，无法上传。<?phpif (!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

您的 PHP 代码和 HTML 中存在多个逻辑错误。

1. 检查表单提交时，您必须检查“上传”（提交按钮的名称）是否在 $_POST 中。

2. 文件上传输入应位于 <form> 标记内。

3. 为文件上传字段设置一个名称，我将其设置为“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>

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

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