Petit soucis avec mon fichier pour uploader les images
Résolu
flexi2202
Messages postés
3822
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
bonjour a tous
j ai un petit soucis avec mon fichier upload pour les images
lorsque je ne choisis aucune image et que je clic sur envois de l image j ai ceci

voici mon fichier
j ai un petit soucis avec mon fichier upload pour les images
lorsque je ne choisis aucune image et que je clic sur envois de l image j ai ceci

voici mon fichier
<?php // Démarrage SESSION session_start(); error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE); //Connexion à la bdd require_once '../base.php'; // Variables/constantes... $allowed = array( "jpg" => "image/jpg", "JPG" => "image/JPG", "jpeg" => "image/jpeg", "JPEG" => "image/JPEG", "gif" => "image/gif", "png" => "image/png", "PNG" => "image/PNG" ); $res = array();// variable qui contiendra les infos à retourner au script JS $err = NULL; // récupération PROPRE des variables de type "array" AVANT de les utiliser $getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL; $pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: $getpseudo; $id = !empty($_POST['id']) ? $_POST['id']: NULL; $photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL; $contenu = !empty($_POST["contenu"]) ? $_POST["contenu"] : ""; // Vérifier si le formulaire a été soumis if ($_SERVER["REQUEST_METHOD"] == "POST") { // Vérifie si le fichier a été uploadé sans erreur. if ($photos ){ if( $photos["error"] != 0 ){ $err = 'Erreur : ' . $photo['error']; }else{ $filename = $photos["name"]; $filetype = $photos["type"]; $filesize = $photos["size"]; $ext = pathinfo($filename, PATHINFO_EXTENSION); $filename = strtolower ($pseudo. uniqid("img_",true) . "." . $ext ) ; // Vérifie l'extension du fichier if (!array_key_exists($ext, $allowed)) { $err = 'Erreur : Veuillez sélectionner un format de fichier valide.</br> <a href="javascript:history.back()">Pour recommencer</a>'; } // Vérifie la taille du fichier - 5Mo maximum $maxsize = 5 * 1024 * 1024; if ($filesize > $maxsize){ $err = 'Error: La taille du fichier est supérieure à la limite autorisée.</br> <a href="javascript:history.back()">Pour recommencer</a>'; }else{ // Vérifie le type MIME du fichier if (in_array($filetype, $allowed)) { // Vérifie si le fichier existe avant de le télécharger. if (file_exists("uploads/" . $filename)) { $err = $filename . ' existe déjà.</br> <a href="javascript:history.back()">Pour recommencer</a>'; } else { if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $filename)){ $err = "Erreur lors de l'upload du fichier"; }else{ $res['message'] = '<style="font-size:20px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès. <button type="button" class=" bg-primary text-white"style="margin-bottom: 10px;"><span style="font-size:20px;"> <a href="form-fichier.php?pseudo=' . $pseudo . '&id=' . $id . '"style="color:#FFFFFF;"> Ajouter une autre image</a></span></button><br> <button type="button" class="bg-primary text-white"><span style="font-size:20px;"> <a href="detail.php?pseudo=' . $pseudo . '&id=' . $id . '"style="color:#FFFFFF;"> Retour a votre journée</a></span></button> '; //préparation de la requête et des variables $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min, contenu ) VALUES (:pseudo, :id_img, :nom_img, :nom_min, :contenu)'; $datas = array( ':pseudo' => $pseudo, ':id_img' => $id, ':nom_img' => $filename, ':nom_min' => $filename, ':contenu' => $contenu ); //exécution de la requêete préparée try{ $req = $bdd->prepare($sql); $req->execute($datas); }catch(Exception $e){ $err = " Erreur dans la requête : " . $e->getMessage(); } } } } else { $res['message'] = '<style="font-size:22px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès. <span style="font-size:20px;"> <a href="form-fichier.php?pseudo=' . $pseudo . '&id=' . $id . '"> Vous pouvez télécharger une autre photo</a></span> <a href="detail.php?pseudo=' . $pseudo . '&id=' . $id . '"> Retour sur votre journée </a></span> '; } } } } else { $debug = ['POST'=>$_POST,'FILE'=>$_FILES]; $err = "Error: " . $photos["error"] . " --- " . print_r($debug,true); } } else { $err = "Méthode invalide"; } $res['error'] = $err; // On renvoi la réponse au format JSON echo json_encode($res); exit;
A voir également:
- Aucun fichier choisi
- Fichier bin - Guide
- Fichier epub - Guide
- Fichier rar - Guide
- Comment réduire la taille d'un fichier - Guide
- Fichier .dat - Guide
7 réponses
En développement web, il faut prendre le réflexe de toujours ouvrir la console du navigateur pour voir entres autres les erreurs javascript. Pour ouvrir la console :
- cliquer n'importe où sur la page web dans le navigateur puis cliquer sur "Inspecter", ceci va ouvrir la fenêtre des Outils de développement du navigateur
- ensuite cliquer sur l'onglet Console dans les Outils de développement
Si tu essayes d'envoyer le formulaire sans choisir de fichier, tu devrais avoir une erreur javascript dans la console du navigateur : Uncaught TypeError: document.getElementById(...) is null
Sous le message d'erreur, il est indiqué le fichier et le numéro de la ligne où cette erreur a été déclenchée , qui doit correspondre à cette ligne dans ton code :
La fonction getElementById() en js permet de récupérer l'élément html correspondant à l'identifiant spécifié en paramètre. Donc cette instruction permet de récupérer l'élément html dont l'identifiant html est id="form_upload".
La fonction getElementById() retourne null si aucun élément html avec l'identifiant spécifié n'a été trouvé.
Avec tous ces éléments tu devrais pouvoir comprendre d'où vient l'erreur et comment la corriger.
- cliquer n'importe où sur la page web dans le navigateur puis cliquer sur "Inspecter", ceci va ouvrir la fenêtre des Outils de développement du navigateur
- ensuite cliquer sur l'onglet Console dans les Outils de développement
Si tu essayes d'envoyer le formulaire sans choisir de fichier, tu devrais avoir une erreur javascript dans la console du navigateur : Uncaught TypeError: document.getElementById(...) is null
Sous le message d'erreur, il est indiqué le fichier et le numéro de la ligne où cette erreur a été déclenchée , qui doit correspondre à cette ligne dans ton code :
if (document.getElementById('form_upload').reportValidity()) {
La fonction getElementById() en js permet de récupérer l'élément html correspondant à l'identifiant spécifié en paramètre. Donc cette instruction permet de récupérer l'élément html dont l'identifiant html est id="form_upload".
La fonction getElementById() retourne null si aucun élément html avec l'identifiant spécifié n'a été trouvé.
Avec tous ces éléments tu devrais pouvoir comprendre d'où vient l'erreur et comment la corriger.
C'est au niveau de ton JavaScript qu'il faudrait agire pour ne pas déclencher l'upload si aucun fichier n'est sélectionné
bonjour jordane
merci de ta reponse
en fait je viens de remarquer que aucun message d erreur n apparaît même si le type de fichier n est pas bon
car en principe ces erreurs devaient être repérées en php
mais comme on a tout changer pour l upload des images
il faut donc faire ces vérifications en javascript
mais comment s y prendre ?
voici le fichier javascript
merci de ta reponse
en fait je viens de remarquer que aucun message d erreur n apparaît même si le type de fichier n est pas bon
car en principe ces erreurs devaient être repérées en php
mais comme on a tout changer pour l upload des images
il faut donc faire ces vérifications en javascript
mais comment s y prendre ?
voici le fichier javascript
<script> var pseudo = '<?php echo $pseudo;?>'; var id = '<?php echo $id ;?>'; console.log('ID', id, 'PSEUDO', pseudo); // pour voir si les variables se remplissent bien dans la console;.. function _(el) { return document.getElementById(el); } function uploadFile(){ var file = _("photo").files[0]; var input_contenu = _("contenu"); var contenu = input_contenu.value; var formdata = new FormData(); formdata.append("photo", file); formdata.append("pseudo", pseudo); formdata.append("id", id); formdata.append("contenu", contenu); //le temps des tests : //alert('pseudo:' + pseudo + ' id: ' + id+ ' contenu: ' + contenu); console.log('ID', id, 'PSEUDO', pseudo, 'CONTENU', contenu); // pour voir si les variables se remplissent bien dans la console;.. var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP //use file_upload_parser.php from above url ajax.send(formdata); } function progressHandler(event) { _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent) + "% uploaded... please wait"; } function completeHandler(event) { let res = typeof(event.target.responseText) != 'undefined' ? JSON.parse(event.target.responseText) : ""; document.getElementById("photo").value = ""; document.getElementById("contenu").value = ""; let message = typeof(res.message) != 'undefined' ? res.message : ""; let error = typeof(res.error) != 'undefined' ? res.error : null; _("status").innerHTML = error ? error : message; _("progressBar").value = 0; //wil clear progress bar after successful upload } function errorHandler(event) { _("status").innerHTML = "Upload Failed"; } function abortHandler(event) { _("status").innerHTML = "Upload Aborted"; } </script>
Bonjour,
Avec HTML5, la validation du formulaire coté client peut désormais se faire en grande partie directement en HTML sans code javascript.
Pour rendre le champ file obligatoire, il suffit par exemple d'ajouter l'attribut html required sur la balise input :
On peut également utiliser l'attribut accept pour autoriser uniquement certains types de fichier :
Pour rappel, la validation coté client ne se substitue pas à la validation coté serveur : il faut faire ces vérifications également en PHP car on peut facilement modifier le formulaire et passer outre la validation du formulaire coté client.
Plus d'infos :
https://developer.mozilla.org/fr/docs/Learn/Forms/Form_validation
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file
Bonne journée,
Avec HTML5, la validation du formulaire coté client peut désormais se faire en grande partie directement en HTML sans code javascript.
Pour rendre le champ file obligatoire, il suffit par exemple d'ajouter l'attribut html required sur la balise input :
<input type="file" name="image" required>
On peut également utiliser l'attribut accept pour autoriser uniquement certains types de fichier :
<input type="file" name="image" required accept="image/png, image/jpeg">
Pour rappel, la validation coté client ne se substitue pas à la validation coté serveur : il faut faire ces vérifications également en PHP car on peut facilement modifier le formulaire et passer outre la validation du formulaire coté client.
Plus d'infos :
https://developer.mozilla.org/fr/docs/Learn/Forms/Form_validation
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/file
Bonne journée,
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour a vous deux
merci Pittet pour l astuce avec le html5
je ne savais pas que je pouvais faire autant de vérification en html 5
le moment venu je m en souviendrais
Alors pour rappel
j ai déjà eu très dur avec le php et enfin cela commence a rentrer
alors le javascript , c est limite de chez limite
Merci Ptittet pour le morceau de code
donc dans mon cas je devrais faire ceci
mais alors ou positionner le morceau de code pour vérifier qu il y a bien un fichier a uploader
merci Pittet pour l astuce avec le html5
je ne savais pas que je pouvais faire autant de vérification en html 5
le moment venu je m en souviendrais
Alors pour rappel
j ai déjà eu très dur avec le php et enfin cela commence a rentrer
alors le javascript , c est limite de chez limite
Merci Ptittet pour le morceau de code
donc dans mon cas je devrais faire ceci
mais alors ou positionner le morceau de code pour vérifier qu il y a bien un fichier a uploader
<form id="upload_form" enctype="multipart/form-data" method="post"> <div class="row"> <div class="col-sm-10 ml-auto mr-auto" style="background: #ECE9E7;margin-bottom:10px;"> <label for="fileUpload">Choississez un fichier:</label> <input type="file" name="photo" id="photo"> </div> </div> </form >
document.getElementById('photo').addEventListener('click', e => { if (document.getElementById('form_upload').reportValidity()) { // le formulaire est valide, on peut déclencher la requête ajax console.log('submit'); } });
Le code javascript devra se positionner avec le reste du code javascript affiché sur la page (donc dans les balises script à la suite du code js que tu a posté dans ton 2e message).
La fonction addEventListener(type, listener) permet de déclencher une fonction lors d'un évènement sur un élément html. Par exemple si on veux afficher un alert('test'); lorsqu'on clique sur l'élément #photo, on peut écrire ce code :
Au lieu d'utiliser la fonction addEventListener(), on peut utiliser les attributs html on<type> tel que onclick, onmouseover...
L'exemple juste au dessus est donc équivalent à écrire ce code :
Dans l'exemple que tu as essayé d'adapter :
-> ici tu appliques l'évènement onclick sur l'input file #photo, donc la vérification du formulaire se fera lorsque l'utilisateur va cliquer sur ce champ : ce n'est pas correct puisque lorsque l'utilisateur clique sur le champ, il n'a pas encore choisi de fichier et le formulaire sera donc forcément invalide.
Il faut donc appliquer la vérification du formulaire lorsqu'on clique sur le bouton Envoyer pour soumettre le formulaire, l'évement onclick est donc à attacher sur le bouton Envoyer.
Sauf erreur de ma part, puisque tu utilises un attribut onclick sur le bouton permettant d'envoyer le formulaire, tu n'as donc pas besoin d'utiliser la fonction addEventListener().
Enfin, comme tu l'a deviné dans ta dernière réponse, il faudra effectivement appeler la fonction uploadFile() de ton code pour envoyer le formulaire si le formulaire est valide (c-a-d si la fonction reportValidity() retourne la valeur true).
Donc pour résumer, au lieu d'utiliser addEventListener(), on va simplement créer une nouvelle fonction qui va vérifier si le formulaire est valide et si c'est le cas, envoyer le formulaire. C'est cette fonction qu'il faudra appeler dans l'attribut onclick du bouton Envoyer de ton formulaire :
La fonction addEventListener(type, listener) permet de déclencher une fonction lors d'un évènement sur un élément html. Par exemple si on veux afficher un alert('test'); lorsqu'on clique sur l'élément #photo, on peut écrire ce code :
document.getElementById('photo').addEventListener('click', function(){ alert('toto'); });
Au lieu d'utiliser la fonction addEventListener(), on peut utiliser les attributs html on<type> tel que onclick, onmouseover...
L'exemple juste au dessus est donc équivalent à écrire ce code :
<input type="file" name="photo" id="photo" onclick="alert('toto')">
Dans l'exemple que tu as essayé d'adapter :
document.getElementById('photo').addEventListener('click', [...]
-> ici tu appliques l'évènement onclick sur l'input file #photo, donc la vérification du formulaire se fera lorsque l'utilisateur va cliquer sur ce champ : ce n'est pas correct puisque lorsque l'utilisateur clique sur le champ, il n'a pas encore choisi de fichier et le formulaire sera donc forcément invalide.
Il faut donc appliquer la vérification du formulaire lorsqu'on clique sur le bouton Envoyer pour soumettre le formulaire, l'évement onclick est donc à attacher sur le bouton Envoyer.
Sauf erreur de ma part, puisque tu utilises un attribut onclick sur le bouton permettant d'envoyer le formulaire, tu n'as donc pas besoin d'utiliser la fonction addEventListener().
Enfin, comme tu l'a deviné dans ta dernière réponse, il faudra effectivement appeler la fonction uploadFile() de ton code pour envoyer le formulaire si le formulaire est valide (c-a-d si la fonction reportValidity() retourne la valeur true).
Donc pour résumer, au lieu d'utiliser addEventListener(), on va simplement créer une nouvelle fonction qui va vérifier si le formulaire est valide et si c'est le cas, envoyer le formulaire. C'est cette fonction qu'il faudra appeler dans l'attribut onclick du bouton Envoyer de ton formulaire :
function submitUploadFileForm(){ if (document.getElementById('form_upload').reportValidity()) { uploadFile(); } }
bonjour Pitet
un tout très grand merci pour cette explication bien détaillée et surtout pour le code
je viens de tester le morceau de code mais celui ci ne retourne aucune erreur
il m affiche juste ceci

voici mon morceau de code avec le bouton envoyer
et voici le code javascript avec lequel j ai ajouter ton morceau de code
un tout très grand merci pour cette explication bien détaillée et surtout pour le code
je viens de tester le morceau de code mais celui ci ne retourne aucune erreur
il m affiche juste ceci

voici mon morceau de code avec le bouton envoyer
<button type="button" name="photo" value="Upload" onclick="uploadFile()" class="btn btn-primary btn-lg" style="width: 100px;height: 50px;color: #FFF;">Envoyer</button>
et voici le code javascript avec lequel j ai ajouter ton morceau de code
<script> var pseudo = '<?php echo $pseudo;?>'; var id = '<?php echo $id ;?>'; console.log('ID', id, 'PSEUDO', pseudo); // pour voir si les variables se remplissent bien dans la console;.. function _(el) { return document.getElementById(el); } function uploadFile(){ var file = _("photo").files[0]; var input_contenu = _("contenu"); var contenu = input_contenu.value; var formdata = new FormData(); formdata.append("photo", file); formdata.append("pseudo", pseudo); formdata.append("id", id); formdata.append("contenu", contenu); //le temps des tests : //alert('pseudo:' + pseudo + ' id: ' + id+ ' contenu: ' + contenu); console.log('ID', id, 'PSEUDO', pseudo, 'CONTENU', contenu); // pour voir si les variables se remplissent bien dans la console;.. var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP //use file_upload_parser.php from above url ajax.send(formdata); } function progressHandler(event) { _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent) + "% uploaded... please wait"; } function completeHandler(event) { let res = typeof(event.target.responseText) != 'undefined' ? JSON.parse(event.target.responseText) : ""; document.getElementById("photo").value = ""; document.getElementById("contenu").value = ""; let message = typeof(res.message) != 'undefined' ? res.message : ""; let error = typeof(res.error) != 'undefined' ? res.error : null; _("status").innerHTML = error ? error : message; _("progressBar").value = 0; //wil clear progress bar after successful upload } function errorHandler(event) { _("status").innerHTML = "Upload Failed"; } function abortHandler(event) { _("status").innerHTML = "Upload Aborted"; } function submitUploadFileForm(){ if (document.getElementById('form_upload').reportValidity()) { uploadFile(); } } </script>
bonjour a vous deux
je suppose que je dois placer cette vérification juste avant celle ci
je suppose que je dois placer cette vérification juste avant celle ci
function uploadFile
je viens d essayer d envoyer un fichier mais le bouton envoyer a perdu sa fonction d envoyer pourtant j ai changer
le nom de la function dans cette partie
le nom de la function dans cette partie
function submitUploadFileForm(){ var file = _("photo").files[0]; var input_contenu = _("contenu"); var contenu = input_contenu.value; var formdata = new FormData(); formdata.append("photo", file); formdata.append("pseudo", pseudo); formdata.append("id", id); formdata.append("contenu", contenu); //le temps des tests : //alert('pseudo:' + pseudo + ' id: ' + id+ ' contenu: ' + contenu);
en effet avec jordane on avait utilise cette console pour afficher les erreurs
et comme de juste
je viens de voir une erreur
mais je ne possède pas de ligne 2390
Uncaught TypeError: document.getElementById(...) is null
submitUploadFileForm https://pecher.000webhostapp.com/peche2/journee-peche/form-fichier.php?pseudo=phil1&id=126%3A2390
onclick https://pecher.000webhostapp.com/peche2/journee-peche/form-fichier.php?pseudo=phil1&id=126%3A1
Il s'agit de la ligne dans le code source html de la page dans le navigateur (Ctrl + U). Dans la console, tu peux normalement cliquer sur le numéro de ligne pour arriver à la ligne en erreur.
Est-ce que tu comprends pourquoi tu as cette erreur ?
-> Cette instruction cherche l'élément html dont l'identifiant est "form_upload" (autrement dit elle cherche la balise html ). Si cette instruction retourne la valeur null (comme indiqué dans le message d'erreur), c'est que la balise n'a pas été trouvée.
Quel est l'identifiant de ton formulaire html ?
je viens de trouver une première erreur
a présent si j essaye de sélectionner un fichier vide , j ai bien mon message d erreur
j avais cette erreur
en fait l id
était
a présent je suis encore bloque pour l envois , lorsque je sélectionne un fichier et que j essaye de envoyer
il me dit que uploadFile is not defined
mais comment définir ce uploadFile
je pense que cela a peut être avoir avec ceci
et ceci
En effet dans le code js de la page, la function uploadFile() n'est plus présente, elle a été renommée.
Un nom de fonction doit être unique, il y a maintenant deux fonctions submitUploadFileForm() ce qui n'est pas correct.
cela commence a rentrer doucement
donc si je comprends bien
comme tu as remplace
par
j ai donc deux fonctions
car j ai du remplacer
par
donc si je comprends bien
on doit supprimer une des deux fonctions
et ajouter
a ce code