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>

JS 文件 thumbnail.js 是我用来生成图像的文件：

const thumbnail = document.querySelector('.video');
    thumbnail.addEventListener('change', function(event) {
for (let i= document.images.length; i-->0;)
    document.images[i].parentNode.removeChild(document.images[i]);
      let file = event.target.files[0];
      let fileReader = new FileReader();
      if (file.type.match('image')) {
        fileReader.onload = function() {
          let img = document.createElement('img');
          img.src = fileReader.result;
          document.getElementsByTagName('div')[0].appendChild(img);
        };
        fileReader.readAsDataURL(file);
      } else {
        fileReader.onload = function() {
          let blob = new Blob([fileReader.result], {type: file.type});
          let url = URL.createObjectURL(blob);
          let video = document.createElement('video');
          let timeupdate = function() {
            if (snapImage()) {
              video.removeEventListener('timeupdate', timeupdate);
              video.pause();
            }
          };
          video.addEventListener('loadeddata', function() {
            if (snapImage()) {
              video.removeEventListener('timeupdate', timeupdate);
            }
          });
          let snapImage = function() {
            let canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            let image = canvas.toDataURL();
            console.log(image);
            let success = image.length > 100000;
            if (success) {
              document.getElementById("thumbnail").src = image;
              URL.revokeObjectURL(url);
            }
            return success;
          };
          video.addEventListener('timeupdate', timeupdate);
          video.preload = 'metadata';
          video.src = url;
          // Load video in Safari / IE11
          video.muted = true;
          video.playsInline = true;
          video.play();
        };
        fileReader.readAsArrayBuffer(file);
      }
    });

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

$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.";

    }

（文件还有更多内容，但问题没有必要）。

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

标签： javascriptphphtml

javascript - 通过 PHP 表单上传图片

问题描述

解决方案

推荐阅读