jQuery驗證插件無法上傳圖片

我在通過jQuery validate plugin上傳圖片時遇到問題。我認爲它不通過發送文件到我的PHP腳本，因爲它沒有通過此檢查：所以我的問題是，如果有人能仔細看一下我的代碼和jQuery驗證插件無法上傳圖片

if ($_FILES['profielfoto']['size'] > 1) {

現在我有AJAX的小知識，這個插件也許發現一個錯誤或什麼。

的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>

來源

2016-11-28 Bram Raaijmakers

你能告訴這種形式的生成的HTML？ – FLX

我已將它添加到我的帖子底部。 –

嘗試FormData

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

而不是

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

for more....

來源

2016-11-28 11:03:04

我得到這個錯誤：'未捕獲類型錯誤：非法調用'不在我的文件，但在包含jQuery和驗證插件文件。 –

add'processData：false' to your ajax code –

'var data = new new FormData（$（'＃registreer-formulier'）[0]）; data：data，processData：false，'這是我的代碼，但即時獲取中間值不是一個構造函數錯誤 –

jQuery驗證插件無法上傳圖片

回答

相關問題