Ik ben bezig met een upload functie op mijn website. Nu wil ik met AJAX een video uploaden, met een titel en een beschrijving. Dit wordt allemaal uit een formulier gehaald. Het uploaden werkt, maar de gegevens (titel, beschrijving en de titel van de file) worden niet in een mysql database gezet. Hoe kan ik toch deze gegegevens doormiddel van een POST met ajax naar een database en dat de video wordt geupload?
Mijn formulier:
<form id="upload_form" method="post" enctype="multipart/form-data">
<label>Selecteer een video:</label><br/>
<input type="file" name="file1" id="file1"/><br/><br/>
<label>Titel:</label><br/>
<input type="text" name="title" id="title" required><br/><br/>
<label>Beschrijving:</label><br/>
<textarea name="description" style="width:370px;height:150px;" required></textarea><br/><br>
<input type="submit" value="Upload" onclick="uploadFile()"><br/><br/>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p><br/>
</form>Mijn ajax bestand:
<script>
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
var title = $("input#title").val();
var description = $("input#description").val();
var dataString = 'title='+ title
+ '&description=' + description
+ '&file=' + file
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", 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.data(dataString);
ajax.open("POST", "upload_verwerk.php");
ajax.send(formdata, dataString);
}
var name = $("#name").val();
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes 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";
}
</script>Mijn upload_verwerk.php:
<?php
require_once 'config.php';
$title = $_POST['title'];
$description = $_POST['description'];
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
if (!$fileTmpLoc) { // if file not chosen
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "IN/$fileName")){
$query = "INSERT INTO Video (Title, Description, Source)
VALUES ('$title', '$description', '$name')";
$result = mysqli_query($mysqli, $query);
echo "$fileName upload is complete";
} else {
echo "move_uploaded_file function failed";
}
?>
Alvast bedankt!
