Petit soucis avec mon fichier pour uploader les images
Résolu/Fermé
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
-
21 juil. 2021 à 19:30
flexi2202 Messages postés 3763 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 septembre 2023 - 24 juil. 2021 à 23:53
flexi2202 Messages postés 3763 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 septembre 2023 - 24 juil. 2021 à 23:53
A voir également:
- Petit soucis avec mon fichier pour uploader les images
- Fichier rar - Guide
- Fichier host - Guide
- Fichier iso - Guide
- Ouvrir fichier .bin - Guide
- Comment réduire la taille d'un fichier - Guide
7 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
546
Modifié le 24 juil. 2021 à 09:58
Modifié le 24 juil. 2021 à 09:58
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.
jordane45
Messages postés
37726
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 septembre 2023
4 618
21 juil. 2021 à 19:39
21 juil. 2021 à 19:39
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é
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
177
21 juil. 2021 à 19:57
21 juil. 2021 à 19:57
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>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
546
Modifié le 22 juil. 2021 à 10:42
Modifié le 22 juil. 2021 à 10:42
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,
jordane45
Messages postés
37726
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 septembre 2023
4 618
Modifié le 22 juil. 2021 à 10:45
Modifié le 22 juil. 2021 à 10:45
Bonjour,
Le required ne fonctionne que lorsque tu utilises le "submit" d'un formulaire ... pas quand tu déclenches l'upload sur un "onclick" d'un bouton pour faire de l'ajax ...
Et pour ce qui est de la vérif côté serveur, là ça n'est clairement pas utile...
Le required ne fonctionne que lorsque tu utilises le "submit" d'un formulaire ... pas quand tu déclenches l'upload sur un "onclick" d'un bouton pour faire de l'ajax ...
Et pour ce qui est de la vérif côté serveur, là ça n'est clairement pas utile...
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
546
>
jordane45
Messages postés
37726
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 septembre 2023
22 juil. 2021 à 11:15
22 juil. 2021 à 11:15
Si l'envoi du formulaire est déclenchée en js, il suffit d'utiliser la fonction reportValidity() sur l'élément html form pour déclencher la validation et exécuter la requête ajax uniquement si cette fonction retourne true.
jordane45
Messages postés
37726
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 septembre 2023
4 618
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
22 juil. 2021 à 11:22
22 juil. 2021 à 11:22
On en revient donc à ma première réponse il faut faire la vérification côté JavaScript...
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
546
>
jordane45
Messages postés
37726
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 septembre 2023
22 juil. 2021 à 11:30
22 juil. 2021 à 11:30
Un exemple sera p-e plus parlant : https://jsfiddle.net/0z1fotxh/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
177
22 juil. 2021 à 17:34
22 juil. 2021 à 17:34
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'); } });
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
546
23 juil. 2021 à 10:40
23 juil. 2021 à 10:40
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(); } }
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
177
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
23 juil. 2021 à 19:52
23 juil. 2021 à 19:52
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>
yg_be
Messages postés
21804
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
27 septembre 2023
1 382
>
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
23 juil. 2021 à 20:13
23 juil. 2021 à 20:13
tu écris qu'il ne t'affiche aucune erreur. sais-tu comment "erreur" se traduit en Anglais?
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
177
>
yg_be
Messages postés
21804
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
27 septembre 2023
23 juil. 2021 à 20:17
23 juil. 2021 à 20:17
merci pour l aide
oui bien sur Error
mais je m attendais a une erreur plus claire pour l utilisateur
oui bien sur Error
mais je m attendais a une erreur plus claire pour l utilisateur
yg_be
Messages postés
21804
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
27 septembre 2023
1 382
>
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
23 juil. 2021 à 20:26
23 juil. 2021 à 20:26
c'est ta responsabilité de programmer ton site pour que l'utilisateur reçoive des messages clairs.
c'est toi qui choisit les technologies utilisées.
c'est toi qui choisit les technologies utilisées.
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
177
23 juil. 2021 à 08:28
23 juil. 2021 à 08:28
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
flexi2202
Messages postés
3763
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
27 septembre 2023
177
Modifié le 24 juil. 2021 à 00:58
Modifié le 24 juil. 2021 à 00:58
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);
24 juil. 2021 à 14:17
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
24 juil. 2021 à 14:42
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 ?
Modifié le 24 juil. 2021 à 15:26
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
Modifié le 24 juil. 2021 à 15:42
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.
24 juil. 2021 à 15:47
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