jQuery validate plugin can't upload image

Question

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>

Can you show the generated HTML of this form ?

FLX
– FLX

2016-11-28 11:05:00 +00:00
Commented Nov 28, 2016 at 11:05 — FLX
– FLX, Commented Nov 28, 2016 at 11:05
I've added it at the bottom of my post.

Bram Raaijmakers
– Bram Raaijmakers

2016-11-28 11:08:13 +00:00
Commented Nov 28, 2016 at 11:08 — Bram Raaijmakers
– Bram Raaijmakers, Commented Nov 28, 2016 at 11:08

Nikhil Vaghela · Accepted Answer · 2016-11-28 11:27:21Z

1

Try FormData

data: new FormData($('#registreer-formulier')[0]),
processData: false

Instead of

data = $('#registreer-formulier').serialize();

for more....

edited Nov 28, 2016 at 11:27

answered Nov 28, 2016 at 11:03

Nikhil Vaghela

2,0942 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bram Raaijmakers Over a year ago

I'm getting this error: 'Uncaught Type Error: Illegal invocation' Not in my file but in the include jquery and validation plugin files.

Bram Raaijmakers Over a year ago

var data = new new FormData($('#registreer-formulier')[0]);                 data: data,                                                                                   processData: false,

This is my code now but im getting a intermediate value is not a constructor error

Bram Raaijmakers Over a year ago

Somehow it is still not sending the image to the php script. Realy weird.

Collectives™ on Stack Overflow

jQuery validate plugin can't upload image

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related