Petit soucis avec mon fichier pour uploader les images

Résolu/Fermé
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
- 21 juil. 2021 à 19:30
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
- 24 juil. 2021 à 23:53
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


<?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;

7 réponses

Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
543
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 :
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.
1
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167
24 juil. 2021 à 14:17
Merci pour la réponse
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
0
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
543 > flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022

24 juil. 2021 à 14:42
Le numéro de la ligne est le dernier numéro du message d'erreur : 2368
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 ?
document.getElementById('form_upload')

-> Cette instruction cherche l'élément html dont l'identifiant est "form_upload" (autrement dit elle cherche la balise html
<form id="form_upload">
). 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 ?
0
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167 > Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022

Modifié le 24 juil. 2021 à 15:26
merci Pitet pour m avoir ouvert les yeux
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
<form id="form_upload" enctype="multipart/form-data" method="post">

en fait l id
était
upload_form


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

       function submitUploadFileForm(){
  if (document.getElementById('form_upload').reportValidity()) {
    uploadFile();
  }
}


et ceci
<label for="fileUpload">Choississez un fichier:</label>
0
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
543 > flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022

Modifié le 24 juil. 2021 à 15:42
L'erreur "uploadFile is not defined" indique que la fonction uploadFile() n'existe pas dans le code.

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.
0
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167 > Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022

24 juil. 2021 à 15:47
heureusement que tu es la
cela commence a rentrer doucement

donc si je comprends bien

comme tu as remplace
 onclick="uploadFile()

par
submitUploadFileForm()


j ai donc deux fonctions
submitUploadFileForm()


car j ai du remplacer

        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);
        }

par
        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);
            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);
        }


donc si je comprends bien
on doit supprimer une des deux fonctions
et ajouter

 if (document.getElementById('form_upload').reportValidity()) {
    uploadFile();
  }


a ce code

        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);
            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);
        }
0
jordane45
Messages postés
36306
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2022
4 347
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é
0
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167
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
 <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>
0
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
543
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 :
<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,
0
jordane45
Messages postés
36306
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2022
4 347
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...
0
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
543 > jordane45
Messages postés
36306
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2022

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.
0
jordane45
Messages postés
36306
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2022
4 347 > 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
On en revient donc à ma première réponse il faut faire la vérification côté JavaScript...
0
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
543 > jordane45
Messages postés
36306
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 septembre 2022

22 juil. 2021 à 11:30
Un exemple sera p-e plus parlant : https://jsfiddle.net/0z1fotxh/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167
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
 <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');
  }
});
0
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
543
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 :
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();
  }
}
0
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167 > 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
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

      <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>
0
yg_be
Messages postés
20284
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 septembre 2022
1 222 > flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022

23 juil. 2021 à 20:13
tu écris qu'il ne t'affiche aucune erreur. sais-tu comment "erreur" se traduit en Anglais?
0
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167 > yg_be
Messages postés
20284
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 septembre 2022

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
0
yg_be
Messages postés
20284
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 septembre 2022
1 222 > flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022

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.
0
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167
23 juil. 2021 à 08:28
bonjour a vous deux
je suppose que je dois placer cette vérification juste avant celle ci
function uploadFile
0
flexi2202
Messages postés
3648
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
13 septembre 2022
167
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
        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);
0