Ajouter une image de input file en attribut de src d'image

j'ai une form contient

<form method="post" action="member_save.php" class="form-horizontal" enctype="multipart/form-data">
<input type="text"  name="firstname"  required>
 
<input type="text"  name="lastname"  required>
<div id="my_form">      
<div class="control-group">
             
<label for="inputEmail" class="control-label style1" >photo personnel</label>
<div class="form-group" style="margin-bottom: 0;" >
<div id="image_preview" class="col-lg-10 col-lg-offset-2">
 <div class="thumbnail hidden">
  <img src="Uploader/5" alt="" style="width:100%;">
 <div class="caption" style="width:0%; background:none">
 <p  style=" visibility:hidden; height:0"></p>
<h3></h3>
<p style="width:10%; background:#FFFFFF"><button type="button" class="btn btn-default btn-danger">annuler</button></p>
</div>
</div>
 </div>
</div>
<input type="file"    name="image" id="image" accept="image/*" required>
<button name="submit" type="submit">save</button>
</form>

input de type file permet d'aperçu une image avant uploader
le boutton save permet d'enregistrer les données en bdd (j'ai fait correctement meme le lien de mon image est enregistrer correctement en bdd par $_files)
ensuite j'ai un code en html permet de générer une image de carte par les données de input firsname et lastname et normalement le photo personnel qui est upload par input file image :

<input type="button" value="aperu une carte"  onClick="AfficherMasquer()"  class="btn btn-success"/>
 <div id="preview" class="preview" style="display:none;">    
<img src="mpdf-master/recto.php" style=" margin-right:-72%; width:70%; "/>
</div>

un fichier gen.js qui est permet de serialized mon formulaire et ajouter les données entrer aux input text firstname et lastname et normalement input file image a l'atrribut de src de img qui est dans le div preview pour transferer au fichier recto.php pour générer l'image de la carte

$(document).ready(function(){
    //PURE PATH TO IMAGE GENERATING PHP FILE
    var base = $(".preview img").attr("src");
     
    //GATHER IMAGE FOR FIRST TIME
    $(".preview img").attr("src",base+'?'+$(".form-horizontal").serialize());
         
    //KEYUP EVENT AND NEW IMAGE GATHER
    $(".form-horizontal input,textarea").stop().keyup(function(){
        $(".preview img").attr("src",base+'?'+$(".form-horizontal").serialize());  
    });
 
    $("#getResults").click(function(){
        $("#resultsUrl").val($(".preview img").attr("src"));
        $("#link").show("slow");
    });
     
});

telle que l'image est générer dans la même page avec exmple: firstname=Meriem et lastname=mali comporte l'url suivant :
127.0.0.1/mpdf-master/recto.php?firstname=meriem&lastname=mali
j'ai besoin d'ajouter
127.0..0.1/mpdf-master/recto.php?firstname=meriem&lastname=mali&image=$_files['image']
comment faire pour ajouter l'image upload par input file de name image a l'attribut src de mon image par quelque chose comme ça dans le gen.js:

$(".form-horizontal input,textarea").stop().keyup(function(){
        $(".preview img").attr("src",base+'?'+$(".form-horizontal").serialize()+("#image").files);  
    });

svp aide moi
Merci
Modifié par ghaza486 (31 May 2017 - 14:12)

slv aide moi