javascript - ajax 和 php 文件从输入上传未定义的索引
问题描述
我今天制作了一个 php 脚本来上传文件,还添加了一些用于发送标题和描述等信息的输入。在我使用 ajax 添加我的 javascript 之前,一切都工作得很好。当我将 javascript 添加到页面并提交表单时,它不再从我的输入元素中获取信息。仅来自 fileupload 输入。
这是我得到的错误:
注意:未定义索引:第 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;
}
?>
解决方案
你的问题是这一行:
var formdata = new FormData();
这将创建一个空对象。您需要通过以下方式告诉它加载表单数据的内容:
var formdata = new FormData(document.getElementById('upload_form'));
推荐阅读
- python - 为什么 HERE API 中的 routingApi.matrix() 方法有时找不到两点之间的成本?
- php - 根据参考在关联 php 数组中添加键
- mysql - 使用更高的隔离级别会降低死锁的可能性吗?
- openedge - Progress4gl如何锁定自己?
- maven - 从 Netbeans 的 Maven 输出中删除 NETBEANS-ExecEvent 行
- coldfusion - 我应该在 onApplicationStart() 函数内部还是外部放置 DSN(数据源)定义?
- firefox - 无法在文本区域上下移动光标(Firefox 77.0.1(64 位)、Windows)
- html - 带溢出的弹性容器
- javascript - html 表单中的 JavaScript 验证
- python - Pandas groupby 结果 - 将一些分组的列值移动到新数据框的行中