ajax и php файл загружают неопределенный индекс из входных данных

Question

Сегодня я сделал php-скрипт для загрузки файла, а также добавил некоторые входные данные для отправки информации, такой как заголовок, описание и т. Д. Все работало очень хорошо, пока я не добавил свой javascript с помощью ajax. Когда я добавил javascript на страницу и отправил форму, он больше не получает информацию от моих элементов ввода. Только из файла загрузки загрузки.

Вот ошибки, которые я получаю:

Примечание: неопределенный индекс: формат в C: \ xampp \ htdocs \ functions \ uploadvideo.php в строке 15

Примечание: неопределенный индекс: заголовок в C: \ xampp \ htdocs \ functions \ uploadvideo.php в строке 16

Примечание: неопределенный индекс: desc в C: \ xampp \ htdocs \ functions \ uploadvideo.php в строке 17

Я знаю, что вопросы о Undefined Index задавались, вероятно, более 1000 раз здесь в stackoverflow, но, пожалуйста, не помечайте это как дубликат. Я знаю, что получаю ошибку, потому что она не может получить доступ к значениям для моих входов, но почему? Я предполагаю, что это как-то связано с JavaScript или может быть потому, что я использую type = "button" вместо type = "submit" для моей кнопки отправки в форме.

Так что я публикую свой код, и, надеюсь, кто-то здесь может найти решение. И я попытался объяснить свою проблему как можно лучше, но если она неясна, просто дайте мне знать

HTML для формы загрузки

<form action="functions/uploadvideo.php" id="upload_form" method="post" enctype="multipart/form-data">
  <label for="title">Title</label><br>
  <input type="text" name="title" id="title"><br><br>

  <label for="format">Format:</label><br>
  <select name="format" id="format">
    <option value=".mp4">mp4</option>
    <option value=".ogg">ogg</option>
    <option value=".webm">webm</option>
  </select><br><br>

  <label for="desc">Description</label><br>
  <textarea name="desc" id="desc"></textarea><br><br>


  Select video to upload:
  <input type="file" name="file" id="file"><br>
  <progress id="progressBar" value="0" max="100" style="width:200px;"></progress><br>
  <h3 id="status"></h3><br>
  <p id="loaded_n_total"></p><br>
  <input type="button" onclick="uploadFile()" value="Upload Video" name="submit">
</form>

JavaScript с AJAX для индикатора выполнения

function _(el) {
  return document.getElementById(el);
}

function uploadFile() {
  var file = _("file").files[0];
  var formdata = new FormData();
  formdata.append("file", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "functions/uploadvideo.php");
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" butes of "+event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0;
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}

PHP-файл для загрузки файла

<?php
include('../config/dbconf.php');

// FFMPREG
$name = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename($_FILES["file"]["name"]));
$nameext = preg_replace('/\\.[^.\\s]{3,4}$/', '', basename($_FILES["file"]["name"])) . ".jpg";
$fullvideoname = $_FILES['file']['name'];
$ffmpeg = "c:\\ffmpeg\\bin\\ffmpeg";
$videoFile = $_FILES["file"]["tmp_name"];
$size = "271x170";
$getFromSecond = 5;
$cmd = "$ffmpeg -i $videoFile -an -ss $getFromSecond -s $size ../uploads/thumbnails/$name.jpg";

// SQL VARIABLES
$format = $_POST['format'];
$title = $_POST['title'];
$desc = $_POST['desc'];
$date = time();

// UPLOADED VIDEO
$tmp_name= $_FILES['file']['tmp_name'];
$fileType = $_FILES['file']['type'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];
$position= strpos($fullvideoname, ".");
$fileextension= substr($fullvideoname, $position + 1);
$fileextension= strtolower($fileextension);

$stmt = $conn->prepare("INSERT INTO videos (name, format, title, description, thumbnail, uploadDate) VALUES (?, ?, ?, ?, ?, ?)");
$stmt->bind_param("sssssi", $name, $format, $title, $desc, $nameext, $date);
if($stmt->execute()) {
    shell_exec($cmd);
    if (isset($fullvideoname)) {

        $path= '../uploads/videos/';

        if (empty($fullvideoname)) {
            echo "Please choose a file";
        }elseif(!empty($fullvideoname)){

            if (($fileextension !== "mp4") && ($fileextension !== "ogg") && ($fileextension !== "webm")){
                echo "The file extension must be .mp4, .ogg, or .webm in order to be uploaded";
            }elseif(($fileextension == "mp4") || ($fileextension == "ogg") || ($fileextension == "webm")){

                if (move_uploaded_file($tmp_name, $path.$fullvideoname)) {
                    echo "Video Uploaded";
                }else{
                    echo 'Failed to move uploaded file';
                }
            }
        }
    }
}else{
    echo "Failed";
    echo $stmt->error;
}
?>

Answer 1

Ваша проблема в этой строке:

var formdata = new FormData();

Это создает пустой объект. Вы должны указать ему загрузить содержимое данных формы, выполнив это следующим образом:

var formdata = new FormData(document.getElementById('upload_form'));