<!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 rel="stylesheet" type="text/css" href="style.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="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>
<script src="script.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-header" class="logo-l col-md-1 logo-header"></div>
<div class="site-branding col-md-4 align-self-center">Compléments Inscription</div>
<div id="couleurs-droite" class=" col-md-1"></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"></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"/>
</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>
</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="" 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("ok");
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("ok");
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>
</div>
</div>
<div id="div" class="mt-5">
</div>
</div>
</body>
</html>