I'm haveing trouble uploading a image via the jQuery validate plugin. I think it doesnt send the file through to my php script because it doesn't pass this check:
if ($_FILES['profielfoto']['size'] > 1) {
Now I have little knowledge of AJAX and this plugin so my question is if someone can look through my code and maybe spot a mistake or something.
Javascript:
$(document).ready(function(){
$("#registreer-formulier").validate({
rules: {
email: {
required: true,
email: true
},
voornaam: {
required: true,
minlength: 3
},
achternaam: {
required: true,
minlength: 3
},
telefoon: {
required: true,
number: true
},
profielfoto: {
required: true,
extension: 'jpg|jpeg|png'
}
},
messages: {
email: 'U moet een email opgeven',
voornaam: 'U moet een voornaam opgeven.',
achternaam: 'U moet een achternaam opgeven.',
telefoon: 'U moet een telefoonnumer opgeven.',
profielfoto: 'U moet een profielfoto uploaden.',
},
submitHandler: submitForm
});
function submitForm() {
var data = $('#registreer-formulier').serialize();
$.ajax ({
type: 'POST',
url: 'assets/php/registreren.php',
data: data,
beforeSend: function() {
$('#error').fadeOut();
$('#btn-submit').html('Bezig met versturen...');
},
success: function (data) {
if (data == '1') {
$('#errordiv').fadeIn(1000, function() {
$('#errordiv').html('<p>Email adres is al in gebruik</p>');
$('#btn-submit').html('Registreren');
});
} else if (data == 'geregistreerd'){
$('#errordiv').fadeIn(1000, function() {
$('#errordiv').html('<p> registreren is gelukt!</p>');
$('#btn-submit').hide();
})
}
}
});
return false;
}
});
PHP:
<?php
require_once 'config.php';
if ($_POST) {
$email = trim($_POST['email']);
$voornaam = trim($_POST['voornaam']);
$achternaam = trim($_POST['achternaam']);
$telefoon = trim($_POST['telefoon']);
$profielfoto = trim($_POST['profielfoto']);
$allergie1 = trim($_POST['allergie1']);
$allergie2 = trim($_POST['allergie2']);
$allergie3 = trim($_POST['allergie3']);
$allergie4 = trim($_POST['allergie4']);
$objCheck = $objDatabaseRegistreren->prepare('SELECT email FROM leden WHERE email = :email');
$objCheck->bindParam(':email', $email);
$objCheck->execute();
$count = $objCheck->rowCount();
if ($count == 0) {
if ($_FILES['profielfoto']['size'] > 1) {
$imgName = $_FILES['profielfoto']['name'];
$imgTmpName = $_FILES['profielfoto']['tmp_name'];
$imgExtension = explode($imgName, '.');
$imgExtension = end($imgName);
$random = rand(1, 10000);
$imgNewName = $random . '_' . $voornaam . '_' . $achternaam . '.' . $imgExtension;
$leden->registreren($email, $voornaam, $achternaam, $telefoon, $imgNewName, $allergie1, $allergie2, $allergie3, $allergie4);
move_uploaded_file($imgTmpName, '../images/profielfotos/' . $imgNewName);
echo 'geregistreerd';
}
} else {
echo '1';
}
}
?>
HTML
<?php
require_once 'assets/php/config.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="Coderthemes">
<!-- App Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App title -->
<title>Tienerhuis | Registreren</title>
<!-- App CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="assets/css/custom.css">
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div class="account-pages"></div>
<div class="clearfix"></div>
<div class="wrapper-page">
<div class="text-center">
<a href="../index.php" class="logo"><span><h1 class="header-title-custom">Tienerhuis Brouwhuis<h1></span></a>
</div>
<div class="m-t-40 card-box">
<div class="text-center">
<h4 class="text-uppercase font-bold m-b-0">Registreren</h4>
</div>
<div class="successdiv">
</div>
<div class="panel-body">
<form id="registreer-formulier" class="form-horizontal m-t-20" enctype="multipart/form-data">
<div id="errordiv">
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="email" required="" placeholder="Email" name="email">
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required="" placeholder="Voornaam" name="voornaam">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" required="" placeholder="Achternaam" name="achternaam">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" required="" placeholder="Telefoonnumer (ouders)" name="telefoon">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" placeholder="Allergieën" name="allergie1">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" placeholder="Allergieën" name="allergie2">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" placeholder="Allergieën" name="allergie3">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" placeholder="Allergieën" name="allergie4">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label><input type="file" name="profielfoto" value="">Maximaal 2mb.</label>
</div>
</div>
<div class="form-group text-center m-t-30">
<div class="col-xs-12">
<button class="btn btn-custom btn-bordred btn-block waves-effect waves-light" name='btn-save' id='btn-submit' type="submit">Registreren</button>
</div>
</div>
<div class="form-group m-t-30 m-b-0">
<div class="col-sm-12">
</div>
</div>
</form>
</div>
</div>
<!-- end card-box-->
<div class="row">
<div class="col-sm-12 text-center">
<!-- <p class="text-muted">Don't have an account? <a href="page-register.html" class="text-primary m-l-5"><b>Sign Up</b></a></p> -->
</div>
</div>
</div>
<!-- end wrapper page -->
<script>
var resizefunc = [];
</script>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<!-- App js -->
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
<!-- Custom Javascript -->
<script src="assets/js/registreren/validation.min.js" charset="utf-8"></script>
<script src="assets/js/registreren/extension.js" charset="utf-8"></script>
<script src="assets/js/registreren/validation.js" charset="utf-8"></script>
</body>
</html>
