加载时将图像绑定到文件上传字段答案

【问题标题】：Bind image to fileupload field on load加载时将图像绑定到文件上传字段
【发布时间】：2019-05-24 13:43:08
【问题描述】：

我正在开发一个可以上传学生数据（包括个人资料照片）的杂项。

我的问题是在更新时，因为并非所有字段都是必需的。我收到错误消息说Undefined index: file 这是$_FILES["file"]["name"] 这一行。

所以我想要实现的是将图像加载到文件上传字段。

我只能显示文件名，但我的问题是将图像从源绑定到字段。

PHP

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(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) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
?>

HTML

<div class="form-group">
    <label>Upload Image:&nbsp;</label>
    <div class="input-group image-preview">
        <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
        <span class="input-group-btn">
            <!-- image-preview-clear button -->
            <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                <span class="glyphicon glyphicon-remove"></span> Clear
            </button>
            <!-- image-preview-input -->
            <div class="btn btn-default image-preview-input">
                <span class="glyphicon glyphicon-folder-open"></span>
                <span class="image-preview-input-title">Browse</span>
                <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" id="uploadimage" /> <!-- rename it -->
            </div>
        </span>
    </div>
</div>

【问题讨论】：

这可不行。为什么要再次上传之前上传的同一张图片？只需检查是否上传了另一个文件，然后更新图像表或表中的图像列。如果没有上传新图片，请保留旧图片。
问题说你正在检查$_FILES['input-file-preview']，但你的问题说你的行是$_FILES["file"]["name"]。它是一个或另一个。请解决您的问题。
@yivi 抱歉，这是一个拼写错误
没问题。但是编辑您的问题，使其有意义。 :)
现在您在某些地方使用file，在其他地方使用fileToUpload。它与 HTML 代码不匹配，这是我回答的基础。发布的代码应该与真实的工作内容一样接近。

标签： php jquery image-uploading

【解决方案1】：

您需要仔细阅读this。

基本上你在检查$_FILES["fileToUpload"]["name"]，但在你的HTML代码中你指的是name="input-file-preview"

所以你的$_FILES 索引应该是input-file-preview。

例如$_FILES['input-file-preview'];

此外，在使用之前验证数组索引是否存在总是一个好主意。

例如

if(isset($_POST["submit"]) && array_key_exists($_FILES['fileToUpload']) ) {
   $target_dir = "uploads/";
   $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
   $uploadOk = 1;
   $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

   // Check if image file is a actual image or fake image

    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

【讨论】：