Petit soucis avec mon fichier pour uploader les images

Résolu
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3640 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


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

Résumé de la discussion

L'envoi d'un fichier image sans sélectionner de fichier déclenche des erreurs côté serveur et JavaScript, ce qui empêche l'upload et nécessite une vérification plus fiable côté client et serveur. Plusieurs participants recommandent de vérifier la console du navigateur pour repérer des erreurs et d'utiliser getElementById et reportValidity pour éviter les appels d'upload lorsque le champ photo est vide. Des réponses ont également suggéré d'enrichir le JavaScript avec une étape conditionnelle qui vérifie que le fichier est sélectionné et respecte les contraintes (type MIME, taille) avant d'utiliser l'upload. En parallèle, plusieurs échanges évoquent l'ajout d'une vérification côté PHP (nom du fichier, extension, existence, déplacement avec move_uploaded_file) et une réponse JSON pour signaler les erreurs sans recharger la page.

Bobot (l'IA à votre service)
  1. Pitet Messages postés 2845 Statut Membre 530
     
    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
    1. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
       
      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
    2. Pitet Messages postés 2845 Statut Membre 530 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      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
    3. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > Pitet Messages postés 2845 Statut Membre
       
      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
    4. Pitet Messages postés 2845 Statut Membre 530 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      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
    5. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > Pitet Messages postés 2845 Statut Membre
       
      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
  2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833
     
    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
  3. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    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
  4. Pitet Messages postés 2845 Statut Membre 530
     
    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
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833
       
      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
      1. Pitet Messages postés 2845 Statut Membre 530 > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
         
        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
      2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 833 > Pitet Messages postés 2845 Statut Membre
         
        On en revient donc à ma première réponse il faut faire la vérification côté JavaScript...
        0
      3. Pitet Messages postés 2845 Statut Membre 530 > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
         
        Un exemple sera p-e plus parlant : https://jsfiddle.net/0z1fotxh/
        0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    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
    1. Pitet Messages postés 2845 Statut Membre 530
       
      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
    2. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > Pitet Messages postés 2845 Statut Membre
       
      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
    3. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      tu écris qu'il ne t'affiche aucune erreur. sais-tu comment "erreur" se traduit en Anglais?
      0
    4. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
       
      merci pour l aide
      oui bien sur Error
      mais je m attendais a une erreur plus claire pour l utilisateur
      0
    5. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      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
  7. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    bonjour a vous deux
    je suppose que je dois placer cette vérification juste avant celle ci
    function uploadFile
    0
  8. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    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