title: jquery ajax submit form uploading image
body: <p>i am adding a family member with a form with php and jquery ajax, my datas are posted but the image is not uploaded.</p>
  
  <p>my html form who post the datas with ajax:
  (the problem is on the input type file)</p>
  
  <pre><code>&lt;form id="form_add_famille" name="form_add_famille" action="modif/add_famille.php" method="POST" enctype="multipart/form-data"&gt;
          &lt;h3&gt;Nouveau membre&lt;/h3&gt;
          &lt;div style="display: none;"&gt;
            &lt;input type="hidden" name="ajouter_famille" value="1"&gt;
            &lt;input type="hidden" name="id_user" value="&lt;?php echo $id_user; ?&gt;"&gt;
          &lt;/div&gt;
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_nom_1"&gt;Nom&lt;/label&gt;
            &lt;input class="span5" type="text" id="famille_nom_1" name="famille_nom_1" &gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_prenom_1"&gt;Prénom&lt;/label&gt;
            &lt;input class="span5" type="text" id="famille_prenom_1" name="famille_prenom_1" &gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="lien_parente"&gt;Lien de parenté&lt;/label&gt;
            &lt;input class="span5" type="text" id="lien_parente" name="lien_parente"&gt;
  
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_adresse_1"&gt;Adresse&lt;/label&gt;
            &lt;input class="span5" type="text" id="famille_adresse_1" name="famille_adresse_1" &gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_cp_1"&gt;Code postal&lt;/label&gt;
            &lt;input class="span5" type="text" id="famille_cp_1" name="famille_cp_1" &gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_ville_1"&gt;Ville&lt;/label&gt;
            &lt;input class="span5" type="text" id="famille_ville_1" name="famille_ville_1" &gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_telephone_1"&gt;Téléphone&lt;/label&gt;
            &lt;input class="span5" type="text" id="famille_telephone_1" name="famille_telephone_1" &gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_profession_1"&gt;Profession&lt;/label&gt;
            &lt;input class="span5" type="text" id="famille_profession_1" name="famille_profession_1" &gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_description_1"&gt;Description&lt;/label&gt;
            &lt;textarea rows="6" class="span5" id="famille_description_1" name="famille_description_1"&gt;&lt;?php echo $row["famille_description_1"]; ?&gt;&lt;/textarea&gt;
          &lt;/span&gt;
  
          &lt;span class="span5 control-group"&gt;
            &lt;label for="famille_photo_1"&gt;Photo&lt;/label&gt;
    &lt;!--         &lt;input type="text" id="famille_photo_1" value="&lt;?php echo $row["famille_photo_1"]; ?&gt;"&gt; --&gt;   
                  &lt;input type="hidden" name="MAX_FILE_SIZE" value="2097152"&gt;    
                  &lt;input id="famille_photo_1" type="file" name="nom_du_fichier"&gt;   
          &lt;/span&gt;
  
          &lt;span class="span10"&gt;
            &lt;input type="submit" class="btn btn-primary pull-right" value="Valider" /&gt;
          &lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>my js:</p>
  
  <p></p>
  
  <pre><code>$(document).ready(function() {
  $('#form_add_famille').on('submit', function() {
  
      var famille_nom_1 = $('#famille_nom_1').val();
      var famille_prenom_1 = $('#famille_prenom_1').val();
  
      if(famille_nom_1 == '' || famille_prenom_1 == '') {
          alert('Les champs doivent êtres remplis');
      } else {
          $.ajax({
              url: $(this).attr('action'),
              type: $(this).attr('method'),
              data: $(this).serialize(),
              dataType: 'json',
              success: function(json) {
                  if(json.reponse == 'ok') {
                      alert('Tout est bon');
                  } else {
                      alert(''+ json.reponse);
                      load_famille();
  
                  }
              }
          });
      }
      return false;
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>my php:</p>
  
  <pre><code>&lt;?php
  $host = ;
  $user = ;
  $pass = ; 
  $db = ;
  $base_url = ;
  
  $link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
  mysql_query("SET NAMES 'utf8'");
  mysql_select_db($db) or die ('Erreur :'.mysql_error());
  
  if(isset($_POST['famille_nom_1']) &amp;&amp; isset($_POST['famille_prenom_1'])) {
      if(($_POST['famille_nom_1'] != '') &amp;&amp; ($_POST['famille_prenom_1'] != '')) {
  
    $id_user = $_POST["id_user"];
    $nom = $_POST["famille_nom_1"];
    $prenom = $_POST["famille_prenom_1"];
    $lien_parente = $_POST["lien_parente"];
    $adresse = $_POST["famille_adresse_1"];
    $ville = $_POST["famille_ville_1"];
    $tel = $_POST["famille_telephone_1"];
    $travail = $_POST["famille_profession_1"];
    $description = $_POST["famille_description_1"];
    $id_famille = $_POST["id_famille"];
    $photo = "none";
  
  
    $select2 = "INSERT INTO Famille(id_user,lien_parente,boolean,id_photo,nom,prenom,adresse,ville,tel,description,travail)     VALUES('$id_user','$lien_parente','1','$photo','$nom','$prenom','$adresse','$ville','$tel','$description','$travail')"; 
    $result = mysql_query($select2,$link) or die ('Erreur : '.mysql_error() );
    $total = mysql_num_rows($result);
    $id_famille = mysql_insert_id();
  
  
  
    /* ----------------------------- */
    /* upload de la photo de famille */
    /* ----------------------------- */
  
  $result_code_perso = mysql_query("SELECT code_perso FROM User WHERE id_user = ".$id_user);
                  while ($row_code_p = mysql_fetch_array($result_code_perso, MYSQL_BOTH)) {
                        $code_perso_user = $row_code_p['code_perso'];
  
                  }
              mysql_free_result($result_code_perso);
  
  $nomOrigine = $_FILES['nom_du_fichier']['name'];
  $elementsChemin = pathinfo($nomOrigine);
  $extensionFichier = $elementsChemin['extension'];
  $extensionsAutorisees = array("jpeg", "jpg", "gif", "png");
  if (!(in_array($extensionFichier, $extensionsAutorisees))) {
  echo "Le fichier n'a pas l'extension attendue";
  } else {    
  // Copie dans le repertoire du script avec un nom
  // incluant l'heure a la seconde pres 
  $repertoireDestination = "/var/www/vhosts/plusplus.com/httpdocs/photos/".$id_user."-".$code_perso_user."/famille/";
  $nomDestination = "photo_du_".date("YmdHis").".".$extensionFichier;
  
  if (move_uploaded_file($_FILES["nom_du_fichier"]["tmp_name"], 
                                   $repertoireDestination.$nomDestination)) {
  } else {
      echo "Le fichier n'a pas été uploadé (trop gros ?) ou ".
              "Le déplacement du fichier temporaire a échoué".
              " vérifiez l'existence du répertoire ".$repertoireDestination;
  }
  }
  $photo_fam=$nomDestination;
  
  $selectphotoupload = "INSERT INTO photo (nom_photo, url_photo) VALUES('$photo_fam','$photo_fam')";
  mysql_query($selectphotoupload);
  
  $id_photo = mysql_insert_id();
  
  
  $insertidphotoupload = "UPDATE Famille SET id_photo = '".$id_photo."' WHERE id_famille =".$id_famille;
    mysql_query($insertidphotoupload);
  
  
   $reponse = 'La modification a été effectué avec succes';
  
  } else {
      $reponse = 'Les champs sont vides';
  }
  } else {
  $reponse = 'Tous les champs ne sont pas parvenus';
  }
  
  
  $array['reponse'] = $reponse;
  echo json_encode($array);
  
  ?&gt;
  </code></pre>