Javascript 通过PHP表单上传图像

对于我正在进行的项目，我试图在上传视频时生成缩略图。这可以通过执行以下操作来完成：

HTML格式：

    <form action='videoUpload.php' id="videoUpload" method='post' enctype="multipart/form-data">    

<input type='hidden' name='id' value='<?php echo $row['videoID'];?>'>
<p><label>Title</label><br />

<input type='text' name='videoTitle' required value='<?php if(isset($error)){ echo $_POST['videoTitle'];}?>'></p>

<p><label>Video</label><br />

<input type="file" name='video' id="video" class="video" required value='<?php if(isset($error)){ echo $_POST['video'];}?>'></p>

        <input type="hidden" id="thumbnail" name="thumbnail" src="" >

         <script src="thumbnail.js"></script>

<input type="hidden" name='videoDuration' id="videoDuration" required value='<?php if(isset($error)){ echo $_POST['videoDuration'];}?>'></p>

        <div id="duration" name="duration">Please choose a video</div>
          <script src="duration.js"></script>

<p><input type='submit' name='submit' id='submit' value='Submit'></p>

然后，我尝试通过以下操作通过我的表单上传图像：

$target_dir = "../thumbnails/";

$target_file = $target_dir . basename($_FILES["thumbnail"]["name"]);

$uploadOk = 1;

$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

        if(isset($_POST["submit"])) {
    
    
        //collect form data
    
        extract($_POST);
    
    $check = getimagesize($_FILES["thumbnail"]["tmp_name"]);

    if($check !== false) {

        echo "File is an image - " . $check["mime"] . ".";

        $uploadOk = 1;

    } else {

        echo "File is not an image.";

        $uploadOk = 0;

    }

}

// Check if file already exists

if (file_exists($target_file)) {

    echo "Sorry, file already exists.";

    $uploadOk = 0;

}

// Check file size

if ($_FILES["thumbnail"]["size"] > 2000000) {

    echo "Sorry, your file is too large.";

    $uploadOk = 0;

}

// Allow certain file formats

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"

&& $imageFileType != "gif" ) {

    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";

    $uploadOk = 0;

}

// Check if $uploadOk is set to 0 by an error

if ($uploadOk == 0) {

    echo "Sorry, your file was not uploaded.";

// if everything is ok, try to upload file

} else {

    if (move_uploaded_file($_FILES["thumbnail"]["tmp_name"], $target_file)) {

        echo "The file ". basename( $_FILES["thumbnail"]["name"]). " has been uploaded.";

    } else {

        echo "Sorry, there was an error uploading your file.";

    }

（文件还有更多内容，但问题不需要）

---

现在我得到的是错误，说'缩略图'是未定义的，我不知道为什么？我不知道它在哪里，我在这方面出了问题，似乎由于某种原因图像没有通过表单？任何帮助都将不胜感激

此JS创建一个画布并将视频帧复制到其中，而不是将画布上可见的图像推送到元素的src属性。 虽然输入元素将在浏览器中显示图像，但在发送表单时，它只发送value属性

请看其他一些结论大致相同的问题：

$target_dir = "../thumbnails/";

$target_file = $target_dir . basename($_FILES["thumbnail"]["name"]);

$uploadOk = 1;

$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

        if(isset($_POST["submit"])) {
    
    
        //collect form data
    
        extract($_POST);
    
    $check = getimagesize($_FILES["thumbnail"]["tmp_name"]);

    if($check !== false) {

        echo "File is an image - " . $check["mime"] . ".";

        $uploadOk = 1;

    } else {

        echo "File is not an image.";

        $uploadOk = 0;

    }

}

// Check if file already exists

if (file_exists($target_file)) {

    echo "Sorry, file already exists.";

    $uploadOk = 0;

}

// Check file size

if ($_FILES["thumbnail"]["size"] > 2000000) {

    echo "Sorry, your file is too large.";

    $uploadOk = 0;

}

// Allow certain file formats

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"

&& $imageFileType != "gif" ) {

    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";

    $uploadOk = 0;

}

// Check if $uploadOk is set to 0 by an error

if ($uploadOk == 0) {

    echo "Sorry, your file was not uploaded.";

// if everything is ok, try to upload file

} else {

    if (move_uploaded_file($_FILES["thumbnail"]["tmp_name"], $target_file)) {

        echo "The file ". basename( $_FILES["thumbnail"]["name"]). " has been uploaded.";

    } else {

        echo "Sorry, there was an error uploading your file.";

    }