Affichage_dimage_memoire-ok

index.php

@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link rel="stylesheet" type="text/css" href="style.css">
+    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> -->
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
+
+
+
     <script src="tensorflow.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
     <script src="jquery.js"></script>
@@ -23,37 +28,64 @@
     </div>
     <div class="container">
         <div class ="div-ID div-photo" >
-            <img id="img-ID" src=""  height="150em"/>
+            <img name ="im_ID" id="img-ID" src=""  height="150em"/>
             <img id="img-ID2" src=""  height="150em"/>
         <div id="div-filename"></div>
         </div>
     </div>
-    <div class="div-form">
-        <form  id ="form" action="" method="" enctype="multipart/form-data">
-        <!-- <label for="fileUpload">Fichier:</label> -->
-        <div class="div-btn-form">
-            <input type="file" name="photo" id="fileUpload" required="required" class="btn-form" hidden>
-            <button onclick="defaultBtnActive()" class="btn-form" id="custom-fileUpload">Choisissez une photo</button>
-        </div>
-        <script>
-            const defaultBtn = document.querySelector('#fileUpload');
-            const customBtn = document.querySelector("#custom-fileUpload");
-            function defaultBtnActive(){
-                defaultBtn.click();
-            }
-        </script>
-        <div class="div-btn-form">
-            <input id="btnSubmit" type="submit" name="submit" value="Upload" class="btn-form">       
-        </div>
-    
-        </form>
+
+        <div class="div-form">
+            <form  id ="form" action="" method="" enctype="multipart/form-data">
+            <!-- <label for="fileUpload">Fichier:</label> -->
+                <div class="div-btn-form">
+                    <input type="file" name="photo" id="fileUpload" required="required" class="btn-form" accept="image/png, image/jpeg" onchange="document.im_ID.src=this.value;">
+                    <!-- <button onclick="defaultBtnActive()" class="btn-form" id="custom-fileUpload">Choisissez une photo</button> -->
+                </div>
+                <div class="div-btn-form">
+                    <input id="btnSubmit" type="submit" name="submit" value="Upload" class="btn-form">       
+                </div>
+            </form>
+            <script>
+                const defaultBtn = document.querySelector('#fileUpload');
+                const customBtn = document.querySelector("#custom-fileUpload");
+                function defaultBtnActive(){
+                    defaultBtn.click();
+                }
+
+               const inpFile = document.getElementById("fileUpload");
+               const previewImage = document.getElementById("img-ID"); 
+
+            //    inpFile.addEventListener("change", function (){
+                    const file = inpFile.files[0];
+
+                    if (file){
+                        const reader = new FileReader();
+                        console.log("ok");
+                        reader.addEventListener("load", function(){
+                            previewImage.setAttribute("src", this.result);
+                        });
+                        reader.readAsDataURL(file);
+                    }
+
+            //    });
+            </script>
+
     </div>
+
     <div id="div">
         <p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
         <p id="p-status"><strong>Statut :</strong><span id="span-status"></span></p>
     </div>
-    <div class = "container">
-            
+    <div class = "form-container" id="email-container">
+        <div class="title-container"> <h2>Choix de l'adresse électronique</h2></div>
+        <div class="form-emails">
+            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
+            <label for="vehicle1"> </label><br>
+            <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
+            <label for="vehicle2"> </label><br>
+            <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
+            <label for="vehicle3"></label><br> 
+        </div>
     </div>
 </body>
 </html>

removeBackground2.php

@@ -4,7 +4,7 @@
 
 define('WHERE_TO_PUT','img_bg');
 define('PATH_TO_BG', "img_bg");
-
+die;
 
 require_once "vendor/autoload.php"; 
 if($_SERVER["REQUEST_METHOD"] == "POST")

script.js

@@ -8,7 +8,8 @@ const canva = "canvas";
 
 const idConsole = "div";var Console;
 
-const idFileUpload = "custom-fileUpload"; var btnFileUpload;
+const idFileUpload = "fileUpload"; var inputFileUpload;
+const idCustomFileUpload = "custom-fileUpload"; var btnCustomFileUpload;
 const idBtnSubmit = 'btnSubmit';var btnSubmit;
 
 const idStatut = "span-status";
@@ -21,17 +22,21 @@ var errorRemoveBackGround = true;
 
 $(document).ready(function(){
 
-  btnFileUpload = $("#"+idFileUpload);
+  inputFileUpload = $("#"+idFileUpload);
+  console.log(inputFileUpload.val());
+  btnCustomFileUpload = $("#"+idCustomFileUpload);
   btnSubmit = $("#"+idBtnSubmit);
   Console = $("#"+idConsole);
 
+  
+
     $("#form").on("submit",function (event) {
         event.preventDefault();
         var formData = new FormData(this);
+        console.log(inputFileUpload.attr('filename'));
         $.ajax({
             //url de la requête
             url: URL_CHECK_ID,
-            
             method: 'POST',
             enctype: 'multipart/form-data',
             data: formData,
@@ -44,6 +49,7 @@ $(document).ready(function(){
         .done(function(data){
           console.log(data);
           src = data['src'];
+          console.log('src');
           errorUpload = data['error'];
           Console.empty();
           Console.append(data['message']);
@@ -79,12 +85,14 @@ $(document).ready(function(){
       })
       // $("#img-ID2").attr('src','img_bg\\pierremarqueno-bg.png')
     });
+
+    
 });
 
 // FONCTIONS  ================================================================================
 
 async function findFaces() {
-  btnFileUpload.prop('disabled',true);
+  btnCustomFileUpload.prop('disabled',true);
   btnSubmit.prop('disabled',true);
   console.log('_findFaces()');
   const model = await blazeface.load();  
@@ -125,7 +133,12 @@ async function findFaces() {
     $("#"+idStatut).append("No Face(s) Found");
   }
   btnSubmit.prop('disabled',false);
-  btnFileUpload.prop('disabled',false);
+  btnCustomFileUpload.prop('disabled',false);
+}
+
+
+function getFile(filePath) {
+  return filePath.substr(filePath.lastIndexOf('\\') + 1) ;
 }