Petit soucis avec mon fichier pour uploader les images

Signaler
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
-
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
-
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

Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453
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.
Messages postés
16435
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
24 juillet 2021
880 >
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021

es-tu certain d'avoir compris les conseils de Pitet le 24 juil. 2021 à 19:08?
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139 >
Messages postés
16435
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
24 juillet 2021

yg_be
avec tous ces messages je ne le retrouves plus
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453 >
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021

Ah oui pardon mon dernier exemple est faux, ce n'est pas le bon comportement. Pas besoin de recharger la page non plus, il faut juste vérifier si le formulaire est valide (donc si le fichier est sélectionné) puis appliquer les vérifications sur ce fichier :
function submitUploadFileForm(){
  if (document.getElementById('form_upload').reportValidity()) {
    if (document.getElementById('photo').files[0].size > 1024) {
      alert('check the size');
    } else {
      uploadFile();
    }
  }
}


Pour vérifier le type de fichier on va simplement ajouter une condition sur la propriété type de l'objet File (au lieu de size pour la taille). L'objet File est le fichier sélectionné dans le formulaire qu'on récupère avec l'instruction
document.getElementById('photo').files[0]
. Au passage on va mettre cet objet dans une variable selectedFile pour l'utiliser plusieurs fois plus facilement : il suffira ainsi d'écrire
selectedFile.size
pour comparer ou afficher la taille du fichier plutôt que de répéter à chaque fois cette instruction.
Ce qui donne en vérifiant si l'image est de type jpeg :
function submitUploadFileForm(){
  if (document.getElementById('form_upload').reportValidity()) {
  	var selectedFile = document.getElementById('photo').files[0];
  
    if (selectedFile.size > 1024) {
      alert('check the size : ' + selectedFile.size);
    } else if (selectedFile.type != 'image/jpeg') {
      alert('check the type : ' + selectedFile.type);
    } else {
      uploadFile();
    }
  }
}
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139 >
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021

waouhhh un tout très grand merci Pitet
cela fonctionne
c est vraiment super nickel
un tout grand merci pour le code qui fonctionne parfaitement et aussi pour l explication qui va avec
heureusement que j ai des personnes comme vous pour m aider
c était vraiment je pense la dernière chose pour que mon site puisse être opérationnel
c est pas facile de trouver des solutions lorsque on sait a peine comme on écrit javascript ...
mais bon avec php j ai eu aussi beaucoup de mal et je commence doucement a m en sortir
j ai encore une question , je vois que seul les fichiers jpeg sont autorise
comment faire pour ajouter des extensions j ai essayer de faire ceci mais sans succès
image/jpeg ,image/gif, image/png


encore une fois un grand merci Pitet
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139 >
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021

voila je pense avoir trouve mais c était juste pour le fun et comprendre

selectedFile.type != 'image/jpeg' && selectedFile.type != 'image/png'
Messages postés
33126
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 635
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é
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
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>
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453
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,
Messages postés
33126
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 635
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...
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453 >
Messages postés
33126
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021

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.
Messages postés
33126
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 635 >
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021

On en revient donc à ma première réponse il faut faire la vérification côté JavaScript...
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453 >
Messages postés
33126
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021

Un exemple sera p-e plus parlant : https://jsfiddle.net/0z1fotxh/
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
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');
  }
});
Messages postés
16435
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
24 juillet 2021
880 >
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021

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.
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139 >
Messages postés
16435
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
24 juillet 2021

oui je suis entièrement d accord
et donc c est la raison pour laquelle je demande de l aide pour qu'un message clair puisse y être affiché
en lieu et place de ce tableau
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139 >
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021

en fait je viens de remarquer qu avec ou sans ce morceau de code j ai le message d erreur

function submitUploadFileForm(){
  if (document.getElementById('form_upload').reportValidity()) {
    uploadFile();
  }
}
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453 >
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021

Il ne faut pas oublier l'attribut html "required" sur ton input file si tu veux le rendre obligatoire :
<input type="file" name="photo" id="photo" required>

Et modifier l'appel de la nouvelle fonction dans l'attribut onclick du bouton :
<button type="button" name="photo" value="Upload" onclick="submitUploadFileForm()" class="btn btn-primary btn-lg" style="width: 100px;height: 50px;color: #FFF;">Envoyer</button>
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139 >
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021

merci Pitet pour cette solution
en effet je n ai plus de message d erreur comme sur le print screen
mais lorsque je clic sur envoyer sans avoir choisi de fichier
rien ne se passe
y a t il moyen d afficher une alert ?
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
bonjour a vous deux
je suppose que je dois placer cette vérification juste avant celle ci
function uploadFile
Messages postés
3026
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
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);