ajax 和 php 文件从输入上传未定义的索引

Question

我今天制作了一个 php 脚本来上传文件，还添加了一些用于发送信息的输入，例如标题和描述等。在我使用 ajax 添加我的 javascript 之前，一切正常。当我将 javascript 添加到页面并提交表单时，它不再从我的输入元素中获取信息。仅来自文件上传输入。

这是我得到的错误：

注意：未定义索引：第 15 行 C:\xampp\htdocs\functions\uploadvideo.php 中的格式

注意：未定义索引：第 16 行 C:\xampp\htdocs\functions\uploadvideo.php 中的标题

注意：未定义索引：第 17 行 C:\xampp\htdocs\functions\uploadvideo.php 中的 desc

我知道关于未定义索引的问题可能已在 stackoverflow 上被问过 1000 多次，但请不要将其标记为重复。我知道我收到错误是因为它无法访问我输入的值，但为什么呢？我的猜测是它与 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>

带有 AJAX 的 JavaScript 用于进度条

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'));