index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="img/favicon.ico">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- Si souhaitez utiliser le code en local -->
    <!-- <script src="tensorflow.js"></script> -->
    <!-- <script src="blazeface.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
    <script src="jquery.js"></script>
   
    <title>Formulaire d'upload de fichiers</title>
    <!-- API TenserFlow -->
</head>
<body>
    

<div class="mb-5">
        <div class="container">
            
            <div class="d-none d-sm-none d-md-none d-lg-block">
                <div id="header-large"class="row d-flex justify-content-between">
                    <!-- Bandeau -->
                        <div id="logo-headers" class="col-md-4 text-left"> <img style="height: 150px;width: 300px;" src="img/logo-header.png" class="text-left"></div>
                        
                        <div class="site-branding col-md-4 align-self-center text-center">Compléments Inscription</div>
                        <div id="couleurs-droite" class=" col-md-4"></div>
                    
                </div>
            </div >
                <div class="row d-flex justify-content-center d-lg-none d-xl-none d-xxl-none text-center "> 
                    <div id="logo-header" class="small-logo bg-white ps-5"> <img style="height: 170px;width: 256px;" src="img/Logo_IMT_Nord_Europe.png" ></div>
                </div>
                <div class="row d-flex justify-content-between d-lg-none d-xl-none d-xxl-none text-center">        
                    <div class="header-small">Compléments Inscription<br>IMT Nord Europe</div>
                </div>
        </div>
    </div>


    <div class = "container grayarea text-center">
        <div  class ="row d-flex justify-content-center"  >
            <h3>Veuillez insérer une photo d'identité</h3>
            <p>(Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 1 Mo.)</p>
        </div>


        <div id ="dropcontainer" class ="row d-flex justify-content-center div-ID div-photo" >
            <div class="col-md-3 my-auto d-flex justify-content-center" >
                
                <img name ="im-ID" id="img-ID" src=""  height="150em"/>
                <!-- <canvas id="ctx"></canvas>  -->
            </div>
            <div id=conditions class="col-md-3 my-5 d-flex justify-content-center">
                <ul class="list-group">
                    <li id="li-oneface" class="list-group-item list-group-item-secondary">Un seul visage  <span></span></li>
                    <li id="li-format"  class="list-group-item list-group-item-secondary">Format (jpg/png)<span></span></li>
                    <li id="li-taille"  class="list-group-item list-group-item-secondary">Poids (< 1 Mo)  <span></span></li>
                </ul>
            </div>
            <div class="col-md-3 my-auto d-flex justify-content-center">
                <img name ="im_ID2" id="img-ID2" src=""   height="150em"/>
            </div>
            <div id="div-filename"></div>
        </div>
    
        <div  class ="row d-flex justify-content-center"  >
            <div class="div-form">
                <form  id ="form" action=""  method="POST" 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" >
                        <!-- <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="Vérifier" class="btn btn-secondary" style="background-color:#00b8de;width: 50%">       
                    </div>
                </form>
                <script>

                    const inpFile      = document.getElementById("fileUpload");
                    const previewImage = document.getElementById("img-ID"); 
                    const file         = inpFile.files[0];
                    console.log(file);
                    if (file){
                        const reader = new FileReader();
                        console.log("ok");
                        reader.addEventListener("load", function(){
                            previewImage.setAttribute("src", this.result);
                            base64 = get_base64(this.result);
                        });
                        reader.readAsDataURL(file);
                        // findFaces("img-ID");
                    }
                    inpFile.addEventListener("change", function (){
                        const file = inpFile.files[0];
                        console.log(file);
                        if (file){
                            const reader = new FileReader();
                            console.log("ok");
                            reader.addEventListener("load", function(){
                                previewImage.setAttribute("src", this.result);
                                base64 = get_base64(this.result);
                            });
                            reader.readAsDataURL(file);
                            // findFaces("img-ID");
                        }

                });

                    // const defaultBtn = document.querySelector('#fileUpload');
                    // const customBtn = document.querySelector("#custom-fileUpload");
                    // function defaultBtnActive(){
                    //     defaultBtn.click();
                    // }
                </script>
                 <script src="script.js"></script>
            </div>
        </div>
    
    <div id="div" class="mt-5">
    </div>
    </div>
</body>
</html>