Bootstrap insertion de photos

Dans ma fenetre bootstrap, j'aimerai que mon bouton "valider" enregistre les données du formulaire (ce qui fonctionne déjà bien) mais il faudrait aussi qu'il m'ouvre une nouvelle fenetre boostrap pour inserer une photo.

Si une personne sait comment faire merci.
Ou alors savoir si une personne sait comment faire pour dans le formulaire, envoyer les données à la base de données et la photo dans un repertoire d'images.

Merci d'avance
voici le code pour mon formulaire de bootstrap
html

<!--ouverture de la fenetre pour ajouter une personne-->
<div class="modal fade" id="btnAjouterPersonnel"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 style="color:black;"><span class="glyphicon glyphicon-pencil"></span> veuillez remplir les informations suivantes</h4>
      </div>
      <div class="modal-body">
        <form role="form">
            <div class="form-group">
              <label ><span class="glyphicon glyphicon-user"></span> Nom</label>
              <input type="text" class="ui-autocomplete ui-widget-content ui-corner-all" id="autocompletenom" name="autocompletenom" placeholder="Entrer le nom"> 
            </div>
            <div>
             <Label class = "contrôle-label"> Sélectionnez la photo 
             <Input id = "uploader" name = "image" type = "file" classe multiple = "file-chargement">
            </Label>
            </div>
            <div class="form-group">
              <label ><span class="glyphicon glyphicon-user"></span> Photo</label>
              <input type="text" class="form-control" id="Photo" placeholder="donner un nom a la photo">
            </div>
            <div class="form-group">
              <label ><span class="glyphicon glyphicon-user"></span> Nom</label>
              <input type="text" class="form-control" id="nompersonnel" placeholder="">
            </div>
            <div class="form-group">
              <label ><span class="glyphicon glyphicon-user"></span> Prénom</label>
              <input type="text" class="form-control" id="prenompersonnel" placeholder="">
            </div>
            <div class="form-group">
            <label ><span class="glyphicon glyphicon-user"></span> uid</label>
              <input type="text" class="form-control" id="uidldap" placeholder="">
            </div>
            <div class="form-group">
              <label ><span class="glyphicon glyphicon-star-empty"></span> Fonction</label>
                <select id="selectFonction" class="selectpicker form-control" data-style="btn-danger" >
                  <option value="0">selectionnez une fonction</option>
            <?php
            foreach ($fonctions as $key => $uneFonction) {
              echo '<option value="'.$uneFonction['idfonction'].'">'.$uneFonction['nomfonction'].'</option>';
            }
            ?>        
              </select>
            </div>
            <div class="form-group">
              <label ><span class="glyphicon glyphicon-user"></span> commentaire</label>
              <input type="text" class="form-control" id="commentaire" placeholder="Entrer le commentaire">
            </div>
          
          <div class="form-group">
              <label ><span class="glyphicon glyphicon-home"></span> Structure</label>
              <select id="selectStructure" class="selectpicker form-control" data-style="btn-danger" >
              <option value="0">cliquez pour selectionner </option>
            <?php
            foreach($structures as $key => $uneStructure) {
                          echo "<option value=\"".$uneStructure['idstructure']."\">";
                          echo $uneStructure['nomstructure'];
                          echo "</option>";
                        }
             ?>        
            </select>
            </div>            
              <div class="form-group">
              <label ><span class="glyphicon glyphicon-envelope"></span> Mail</label>
              <input type="text" class="form-control" id="mailpersonnel" placeholder="">
          </div>
          
          <div class="form-group">
              <label ><span class="glyphicon glyphicon-object-align-left"></span> Bureau</label>
              <input type="text" class="form-control" id="bureaupersonnel" placeholder="Entrer le numéro du bureau">
          </div>
          
          <div class="form-group">
              <label ><span class="glyphicon glyphicon-earphone"></span> Numéro</label>
              <input type="text" class="form-control" id="numeropersonnel" placeholder="Entrer le numéro de téléphone">
          </div>
          
          <div class="form-group">
              <label ><span class="glyphicon glyphicon-sort-by-order"></span> Ordre</label>
              <input type="text" class="form-control" id="ordre" placeholder="Entrer l'ordre">
          </div>
       </form>
       </div>
      <div class="modal-footer">
          <button type="button" class="btnSup2 left" id="btnAjouterP" data-dismiss="modal" class="btn btn-default pull-left"><span class="glyphicon glyphicon-ok"></span> Ajouter</button>
          <button type="button" class="annuler" class="btn btn-default btn-default pull-center" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Annuler</button>
      </div>
      </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

la fonction

$("#btnAjouterP").click(function(){

$.ajax(
{
url:'./application/vues/uploader.php',
url : './application/controleurs/personnel.php',
type : 'POST',
data : {
'nompersonnel': $("#nompersonnel").val(),
'prenompersonnel': $("#prenompersonnel").val(),
'selectFonction': $("#selectFonction").val(),
'commentaire': $("#commentaire").val(),
'selectStructure': $("#selectStructure").val(),
'mailpersonnel': $("#mailpersonnel").val(),
'numeropersonnel': $("#numeropersonnel").val(),
'numbureau': $("#numbureau").val(),
'ordre': $("#ordre").val(),
'uidldap':$("#uid").val(),
'photo':$("#photo").val(),
'cas': 'ajoutP',
},

success : function(data)
{
//location.reload();
},
error : function()
{
alert("error");
},
});
})

Bonjour,

Ça ne va pas directement aider ton problème, mais juste pour simplifier un morceau de ton code, plus précisément la récupération de tes données de formulaire :

// plutôt que de faire ça ...
var datas=[];
datas['nompersonnel'] = $("#nompersonnel").val();
datas['prenompersonnel'] = $("#prenompersonnel").val();
datas['selectFonction'] = $("#selectFonction").val();
datas['commentaire'] = $("#commentaire").val();
datas['selectStructure'] = $("#selectStructure").val();
datas['mailpersonnel'] = $("#mailpersonnel").val();
datas['numeropersonnel'] = $("#numeropersonnel").val();
datas['numbureau'] = $("#numbureau").val();
datas['ordre'] = $("#ordre").val();
datas['uidldap'] =$("#uid").val();
datas['photo'] =$("#photo").val();
datas['cas'] = 'ajoutP';

// faire plutôt ça
var datas = $('form').serialize();
datas += '&cas=ajoutP';

... par contre, cela implique de bien avoir renseigné le name dans tes input (ce qui n'est pas le cas ici)