Skip to content

P
Projet ISIS
Commit d52392c5 authored by BOUAZIZ Nassim 's avatar BOUAZIZ Nassim
Browse files
Options

Bootstrap verif photo

parent b1b0d076
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 62 deletions
index.php
View file @ d52392c5
......@@ -6,8 +6,8 @@
<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"> -->
<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">
......@@ -20,15 +20,33 @@
<!-- API TenserFlow -->
</head>
<body>
<div class="site-header-main">
<div id="logo-header"></div>
<div class="site-branding">Titre de la page</div>
<div id="couleurs-droite"></div>
<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"></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-between d-lg-none d-xl-none d-xxl-none text-center">
<div class="col-md-12 header-small">Compléments Inscription<br>IMT Nord Europe</div>
</div>
</div>
</div>
<div class="container">
<div class ="div-ID div-photo" >
<img name ="im-ID" id="img-ID" src="" height="150em"/>
<div id=conditions>
<div class="container grayarea">
<div 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>
<li id="li-oneface">Un seul visage<span></span></li>
<li id="li-format">Format correct<span></span></li>
......@@ -36,38 +54,28 @@
<li id="li-poids">Poids<span></span></li>
</ul>
</div>
<img name ="im_ID2" id="img-ID2" src="" height="150em"/>
<div id="div-filename"></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>
<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-form">
</div>
</form>
<script>
<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-form">
</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);
});
reader.readAsDataURL(file);
// findFaces("img-ID");
}
inpFile.addEventListener("change", function (){
const inpFile = document.getElementById("fileUpload");
const previewImage = document.getElementById("img-ID");
const file = inpFile.files[0];
console.log("ok");
if (file){
......@@ -79,18 +87,30 @@
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);
});
reader.readAsDataURL(file);
// findFaces("img-ID");
}
});
// const defaultBtn = document.querySelector('#fileUpload');
// const customBtn = document.querySelector("#custom-fileUpload");
// function defaultBtnActive(){
// defaultBtn.click();
// }
</script>
});
// const defaultBtn = document.querySelector('#fileUpload');
// const customBtn = document.querySelector("#custom-fileUpload");
// function defaultBtnActive(){
// defaultBtn.click();
// }
</script>
</div>
</div>
</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>
......
style.css
View file @ d52392c5
......@@ -12,26 +12,16 @@ html,body{
}
.container{
margin-bottom: 20px;
display: flex;
justify-content: center;
border-radius: 13px;
}
.div-btn-form{
align-self: auto;
text-align: center;
margin: 5px;
}
.grayarea {
max-width: 700px !important;/*Set your own width %; */
}
.div-photo {
height: 200px;
width: 700px;
margin-top: 35px;
padding-top: 50px;
display: flex;
justify-content: space-evenly;
background-color: whitesmoke;
border: solid ;
border-color: #00b8de;
......@@ -53,6 +43,19 @@ html,body{
line-height: 1.25;
font-weight: 700;
color: white;
text-align: center;
}
#header-large{
background-color: #00b8de !important;
border: white;
}
.header-small{
color: #00B8DE;
font-weight: bold;
font-size: 200%;
}
#logo-header{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment