[HTML] Formulaire et photo avec webcam
Bonjour à vous. J'anticipe déjà en vous souhaitant un joyeux...
Je suis débutant dans le développement Web et je voudrai associer à mon formulaire html une zone où il sera possible d'y associer une photo ( format demi carte photo) quand une personne viendra renseigner ses informations..
Merci!
Bonjour,
Une ligne de code en HTML:
<input type="file" id="photo" name="image" onchange="getverifiles(this)">
Et un script Javascript:
<script>
function getverifile(id){
let type = id.files[0].types;
let types = ['jpg','png','jpeg','svg'];
if(types.includes(type)){
//Envoi du formulaire par AJAX
}
}
</script>
Bonne Journée
bonjour a tous! encore désolé de l'extreme retard par rapport à mon premier post.
je suis perdu quant à l'envoie du formulaire par ajax.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="formulaire_style.css">
<title>Leçon formulaire</title>
<form action="dbname2.php " method="POST">
<div class="c100">
<label for="nom">nom:</label>
<input type="text" id="nom" name="nom" placeholder="nom a saisir">
</div>
<div class="c100">
<label for="prenom">prenom:</label>
<input type="text" id="prenom" name="prenom" placeholder="prenom a inserer">
</div>
<div class="c100">
<label for="mail">mail:</label>
<input type="mail" id="mail" name="mail">
</div>
<div class="c100">
<label for="nom">Age:</label>
<input type="number" id="age" name="age" min="5" max="100">
</div>
<div class="c100">
<label for="pays">Pays de residence:</label>
<select id="pays" name="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="italie">Italie</option>
</optgroup>
<optgroup label="Afrique">
<option value="algerie">Agerie</option>
<option value="tunisie">Tunisie</option>
<option value="maroc">Maroc</option>
<option value="cameroon">Cameroon</option>
<option value="gabon">Gabon</option>
</optgroup>
</select>
</div>
<div>
<input type="file" id2="photo" name="image" onchange="getverifiles(this)" >
</div>
<div class="c100" id="submit">
<input type="submit" name="Envoyer">
</div>
</form>
<script type="">
function getverifile(id2){
let type = id2.files[0].types;
let types = ['jpg','png','jpeg','svg'];
if(types.includes(types)){
}
}
</script>
</body>
</html>
merci!
bonjour a tous! encore désolé de l'extreme retard par rapport à mon premier post.
je suis perdu quant à l'envoie du formulaire par ajax.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="formulaire_style.css">
<title>Leçon formulaire</title>
<form action="dbname2.php " method="POST">
<div class="c100">
<label for="nom">nom:</label>
<input type="text" id="nom" name="nom" placeholder="nom a saisir">
</div>
<div class="c100">
<label for="prenom">prenom:</label>
<input type="text" id="prenom" name="prenom" placeholder="prenom a inserer">
</div>
<div class="c100">
<label for="mail">mail:</label>
<input type="mail" id="mail" name="mail">
</div>
<div class="c100">
<label for="nom">Age:</label>
<input type="number" id="age" name="age" min="5" max="100">
</div>
<div class="c100">
<label for="pays">Pays de residence:</label>
<select id="pays" name="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="italie">Italie</option>
</optgroup>
<optgroup label="Afrique">
<option value="algerie">Agerie</option>
<option value="tunisie">Tunisie</option>
<option value="maroc">Maroc</option>
<option value="cameroon">Cameroon</option>
<option value="gabon">Gabon</option>
</optgroup>
</select>
</div>
<div>
<input type="file" id2="photo" name="image" onchange="getverifiles(this)" >
</div>
<div class="c100" id="submit">
<input type="submit" name="Envoyer">
</div>
</form>
<script type="">
function getverifile(id2){
let type = id2.files[0].types;
let types = ['jpg','png','jpeg','svg'];
if(types.includes(types)){
}
}
</script>
</body>
</html>
merci!
Bonjour,
L'envoi de ton formulaire par AJAX ou il est en PHP. A toi de voir selon ton serveur.
Je te renvoie ton code avec une erreur d'écriture de ma part.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="formulaire_style.css">
<title>Leçon formulaire</title>
<form action="dbname2.php " method="POST">
<div class="c100">
<label for="nom">nom:</label>
<input type="text" id="nom" name="nom" placeholder="nom a saisir">
</div>
<div class="c100">
<label for="prenom">prenom:</label>
<input type="text" id="prenom" name="prenom" placeholder="prenom a inserer">
</div>
<div class="c100">
<label for="mail">mail:</label>
<input type="mail" id="mail" name="mail">
</div>
<div class="c100">
<label for="nom">Age:</label>
<input type="number" id="age" name="age" min="5" max="100">
</div>
<div class="c100">
<label for="pays">Pays de residence:</label>
<select id="pays" name="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="italie">Italie</option>
</optgroup>
<optgroup label="Afrique">
<option value="algerie">Agerie</option>
<option value="tunisie">Tunisie</option>
<option value="maroc">Maroc</option>
<option value="cameroon">Cameroon</option>
<option value="gabon">Gabon</option>
</optgroup>
</select>
</div>
<div>
<input type="file" id2="photo" name="image" onchange="getverifile(this)" >
</div>
<div class="c100" id="submit">
<input type="submit" name="Envoyer">
</div>
</form>
<script type="">
function getverifile(id){
let type = id.files[0].types;
let types = ['jpg','png','jpeg','svg'];
if(types.includes(type)){
}
}
</script>
</body>
</html>
Bonne Journée
Bonjour. L'envoie du code par ajax est au dessus de mes compétences d'où ma sollicitation d'aide...
Merci