ajout d une barre de progression sur l upload des images Résolu/Fermé

Question

bonjour a tous j ai un fichier d upload d image mais j aurais souhaiter savoir comment venir y intégrer une barre de progression voici mon fichier merci $taille_maxi) { $erreur = 'Le fichier est trop gros...'; } if(file_exists("uploads/" . $_FILES["file"]["name"])){ $erreur = ' L\'image existe déjà.'; } if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload { //On formate le nom du fichier ici... $fichier = strtr($fichier, 'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy'); $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier); if(move_uploaded_file($_FILES['file']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné.. { echo '
Upload effectué avec succès ! '; include('mabd.php'); $req =$bdd->prepare('INSERT INTO galerie_images ( nom_img, nom_min) VALUES ( :nom_img, :nom_min)'); $req->execute(array( 'nom_img' => $_FILES["file"]["name"], 'nom_min' => $_FILES["file"]["name"] )); } else //Sinon (la fonction renvoie FALSE). { echo 'Echec de l\'upload !'; } } else { echo $erreur; } ?>

flexi2202 · Answer

bonjour a tous voila je pense avoir trouve quelque chose mais le soucis que je rencontre c est que le fichier s'upload tout seul des qu il a été choisi sans que je lui demande y a t il moyen de modifier le code de tel façon a c que le fichier soit uploader grâce a submit merci de l aide voici le code actuel

HTML5 File Upload Progress Bar Tutorial

et le javascript function _(el) { return document.getElementById(el); } function uploadFile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); 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", "file_upload_parser.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) { _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; //wil clear progress bar after successful upload } function errorHandler(event) { _("status").innerHTML = "Upload Failed"; } function abortHandler(event) { _("status").innerHTML = "Upload Aborted"; }

flexi2202 · Answer

bon rien ne fonctionne la seule chose que j ai trouve c est d indiquer un message durant l upload lorsque je choisi l image j utilise ce code et je viens de trouver ce morceau de code que j essaye d appliquer mais cela ne fonctionne pas function display_loader() { document.getElementById('loader').innerHTML = "

Loading, please wait ...";} j ai donc modifier mon fichier html

flexi2202 · Answer

bonjour Jordane 
merci pour la réponse
donc même avoir un  simple message en javascript cela ne fonctionnera pas ?
car une fois mon image uploader , je me dirige vers un autre fichier qui affiche l image téléchargée
donc du coup n y a t il pas moyen d afficher un message une fois que l on clic sur l upload et qui disparaît une fois que j arrive sur l autre page 
en s assurant bien évidement qu il y a bien une image a télécharger

car lorsque je regarde ce code .. une barre de progression agit bien durant l upload

https://codepen.io/PerfectIsShit/pen/zogMXP

j ai trouve ceci aussi
https://codes-sources.commentcamarche.net/forum/affich-619989-comment-afficher-un-message-d-attente-pendant-un-upload

flexi2202 · Answer

merci pour ton aide jordane oui j ai aussi essayer de l appliquer a mon formulaire car a la longue de chercher j ai compris ce que je devais faire pour faire declencher le script de javascript j ai donc fait ceci en changeant bien sur file1 en file mais rien ne se passe

flexi2202 · Answer

merci pour la reponse jordane j ai donc mis ce code car c est celui qui me parle le plus function _(el) { return document.getElementById(el); } function uploadFile(){ var file = _("file").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file", file); 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", "file_upload_parser.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) { _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; //wil clear progress bar after successful upload } function errorHandler(event) { _("status").innerHTML = "Upload Failed"; } function abortHandler(event) { _("status").innerHTML = "Upload Aborted"; } et donc en fait il faut que j adapte ce code sur la page qui demande a l utilisateur d uploader une image avec le form car dans l exemple que j ai trouve cela ce passe ainsi https://codepen.io/PerfectIsShit/pen/zogMXP ensuite j ai donc pris mon form pour le modifier de cette façon pour ce qui est de ce que fait le code ajax il appelle deux fonctions d après ce que je comprends et il affiche une barre de progression et l avancée du ficher envoyé dans ma console aucune erreur

jordane45 · Answer

Pour voir ce qui cloche il faut utiliser la console du navigateur ( je te conseille d'utiliser FireFox ) et de bien penser à activer le debugage XHR

Ensuite, tu exécutes le code .. et tu "déplies"  la ligne "post"  et tu regardes ce qui s'affiche dans l'onglet reponse ainsi que dans l'onglet requête
Tu nous en fais des captures écran et tu nous les mets dans la discussion...

flexi2202 · Answer

merci pour ton aide jordan 

je n ai jamais fait ce genre de manipulation 
voici une copie d écran avec le debuggage XHR que je pense être bien active

flexi2202 · Answer

ah mince nos message ce sont croise
mais je ne vois rien de ton image c est trop petit jordane

flexi2202 · Answer

desole j ai eu une panne de réseau 
voici donc l image


un grand merci pour ton aide jordane

flexi2202 · Answer

je pense que tu veux voir ceci

flexi2202 · Answer

bonjour jordane 

merci pour le temps consacré

voila je pense avoir bien corrige  j ai mis  l ID sur file
j ai une erreur en moins 

la suivante apparemment c est sur cette ligne 
 ajax.addEventListener("abort", abortHandler, false);

qui apparemment correspond a cette ligne 

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}

je suppose que cela indique que l upload a échoué

flexi2202 · Answer

donc mon id n'est pas encore bonne ?

flexi2202 · Answer

merci jordane 
je reviens plus tard 
car j ai mis le bordel dans mon code

flexi2202 · Answer

re bonjour voila j ai tout remis en état .... donc voila mon code modifie de form mais toujours les mêmes erreurs pourtant j ai mis file partout ...

flexi2202 · Answer

je reprends encore une fois de nouveau depuis le debut dans ce cas et c est vrai que c est ce que j aurais du faire dans mon code j ai ces lignes dans l exemple celle ci
elle correspond a mon avis a ma ligne avec le submit puisque c est elle qui déclenche l envoi donc cette partie de mon code devrait ressemblait a ceci pour l instant l hébergeur gratuit ou je fais des essais fais des caprices

flexi2202 · Answer

je viesn de refaire un esai je n ai plus d erreur mais la barre de telechargement ne fonctionne pas

flexi2202 · Answer

ok jordane 
as tu un lien ou une petite explication pour moi y parvenir

flexi2202 · Answer

je pense que c est ceci

flexi2202 · Answer

merci pour l aide jordane 

ils disent que la requête a été tronquée et  cela est très long en terme d affichage


et pour la reponse voici

flexi2202 · Answer

Merci pour ton aide Jordane et donc je dois m y prendre comment ...

flexi2202 · Answer

oui je me doute , mais c est dommage mdrrr encore une erreur de ma part la redirection c est le fichier cible-fichier.php mais cela ne change rien je n ai aucune erreur mais rien ne se passe voici donc le fichier cible-fichier.php

phil le perleur

"image/jpg", "JPG" => "image/JPG", "jpeg" => "image/jpeg", "JPEG" => "image/JPEG", "gif" => "image/gif", "png" => "image/png", "PNG" => "image/PNG" ); $filename = $_FILES["photo"]["name"]; $filetype = $_FILES["photo"]["type"]; $filesize = $_FILES["photo"]["size"]; // Vérifie l'extension du fichier $ext = pathinfo($filename, PATHINFO_EXTENSION); if (!array_key_exists($ext, $allowed)) die('Erreur : Veuillez sélectionner un format de fichier valide.
Pour recommencer'); // Vérifie la taille du fichier - 5Mo maximum $maxsize = 5 * 1024 * 1024; if ($filesize > $maxsize) die('Error: La taille du fichier est supérieure à la limite autorisée.
Pour recommencer'); // 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/" . $_FILES["photo"]["name"])) { echo $_FILES["photo"]["name"] . ' existe déjà.
Pour recommencer'; } else { move_uploaded_file($_FILES["photo"]["tmp_name"], "uploads/" . $_FILES["photo"]["name"]); echo 'Votre fichier a été téléchargé avec succès.>'; $req = $bdd->prepare('INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)'); $req->execute(array( 'pseudo' => $pseudo, 'id_img' => $id, 'nom_img' => $_FILES["photo"]["name"], 'nom_min' => $_FILES["photo"]["name"] )); } } else { echo 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.
Pour recommencer'; } } else { echo "Error: " . $_FILES["photo"]["error"]; } } } else { header('Location:../login-obligatoire-peche-perle.php'); die(); } ?>

flexi2202 · Answer

bonjour jordane 
waouhh super génial un méga tout grand merci pour ce code 
en fait cette partie du code je n ai pas encore eu le temps de la corriger pour la mettre aux normes avec les conseils que tu m as donné
mais des que ce soucis de barre de progression est termine je vais pouvoir m y mettre
et surtout sécurisé toutes les variables globales enfin les rendre propre

voila j ai mis le code en place 
malheureusement dans la console de réponse 
il y a une erreur

{"error":"Error: 0"}

flexi2202 · Answer

bonjour a tous 
même en utilisant mon ancien fichier form-fichier
donc sans la barre de progression cela ne fonctionne pas 
j ai donc une erreur dans mon fichier cible 

mais je ne parviens pas a découvrir laquelle
si quelqu u peux m éclairer 
merci

jordane45 · Answer

Le message que tu as dans la console vient du ELSE  du if

if ($photos && $photos["error"] == 0){

Cela signifie donc que la variable $photo n'existe pas  ou (mais ce n'est pas le cas) que $photos['error'] n'est pas égale à zéro 

Si tu regardes ton code :

Côté JS, tu as :

formdata.append("file1", file);


Côté PHP,

$photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL;

flexi2202 · Answer

merci jordane
pour ta réponse

ah ben oui donc du coup il y a une incompatibilité

donc je dois modifier mon code de cette façon 

  var file = _("photo").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("photo", file);

flexi2202 · Answer

décidément ... cela refuse de fonctionner j ai pourtant tout modifier et j ai toujours la même erreur voici l extrait de code que j ai modifier

jordane45 · Answer

Il semble qu'un IF n'était pas fermé. "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 // récupération PROPRE des variables de type "array" AVANT de les utiliser (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! ) $getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL; $pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: NULL; $id = !empty($_POST['id']) ? $_POST['id']: NULL; $photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL; // 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 && $photos["error"] == 0){ $filename = $photos["name"]; $filetype = $photos["type"]; $filesize = $photos["size"]; // Vérifie l'extension du fichier $ext = pathinfo($filename, PATHINFO_EXTENSION); if (!array_key_exists($ext, $allowed)) { $err = 'Erreur : Veuillez sélectionner un format de fichier valide.
Pour recommencer'; } // 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.
Pour recommencer'; }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/" . $photos["name"])) { $err = $photos["name"] . ' existe déjà.
Pour recommencer'; } else { if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){ $err = "Erreur lors de l'upload du fichier"; }else{ $res['message'] = 'Votre fichier a été téléchargé avec succès.>'; //préparation de la requête et des variables $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)'; $datas = array( ':pseudo' => $pseudo, ':id_img' => $id, ':nom_img' => $filename, ':nom_min' => $filename ); //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{ $err = "Error de type de fichier: "; } } else { $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.
Pour recommencer'; } } else { $err = "Error: " . $photos["error"]; } } else { $err = "Méthode invalide"; } $res['error'] = $err; // On renvoi la réponse au format JSON echo json_encode($res); ?>

flexi2202 · Answer

merci jordane pour la correction mais de nouveau une erreur 
cette fois c est une page blanche qui est retournée

et j ai une erreur dans le javascript

flexi2202 · Answer

l onglet réponse est vide 
apparemment cela se situe a la ligne 77
et pourtant les deux accolades sont bonnes 
j ai regarder on a bien des points virgules la ou il faut 
je vais continuer a regarder
voici le code de l erreur

flexi2202 · Answer

merci pour la réponse jordane  et le code 
cela passe pour l erreur
mais il y a ceci a présent 
j ai ce message sur mon écran 
{"message":"Votre fichier a \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 avec succ\u00e8s.>","error":" Erreur dans la requ\u00eate : SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'pseudo' cannot be null"}

flexi2202 · Answer

y a une erreur dans la requête il me semble  au sujet du pseudo ?
mais je ne vois pas ce qui cloche ...

flexi2202 · Answer

merci pour la reponse 
donc cela se modifie dans mon phpmyadin 
ou la colonne ne peux pas être null ?

flexi2202 · Answer

dans ma base 
je devrais lui indiquer que 
que null


ou alors modifier cette ligne 
 ':pseudo' => $pseudo,

de cette façon 
is_null(variable);

donc 

 ':pseudo' => is_null($pseudo),

flexi2202 · Answer

jordane 
merci pour la réponse et les explications 
mais je pense que cette fois sans que je ne puisse rien connaître en javascrpt cela sort  complètement de mes compétences 
je ne vais jamais m en sortir
je vais donc me diriger vers un truc plus simple ...
je pensais au début que cela ne sert qu une ou deux lignes a modifier

je vais donc chercher un moyen pour afficher un message d attende lors de l envois en javascript

mais quoi qu il en soi merci d avoir fait ton maximum pour m aider

flexi2202 · Answer

oui en effet jordane que cela serait dommage pourtant je en sis pas du style a abandonner merci pour la solution dans mon input l id est photo et pourtant ce qui pose soucis c est le pseudo

flexi2202 · Answer

en fait  tout cette partie de code ne vient pas de moi 
c est au tout début de mon site ou je savais même pas ce que c était une base de donnée 
et une personne âgée m a propose de m aider  et je m aperçois que cela est un peu le foutoir 

le principe est le suivant 
chaque utilisateur peut entrer sa journée de pêche et ajouter des photos 
et sur ces photos un commentaire pu être ajoute
ces photos peuvent être également supprimées

donc sur chaque journée de pêche postée il y a des photos 

par exemple
si le pécheur A  a été péché le 1 mai il peux ajouter des photos , supprimer ou même voir ces photos en grand format

idem pour le pêcheur B ou c ou D ...

donc il faut une relation pour mettre tout cela en place
dans ma base chez un ID qui sert pour les photos en général
puis un nom pour l image normal  nom_img
un nom pour l image minimum nom_min
le pseudo a qui correspond la photo 
et enfin l ID_ IMG qui correspond  a la journée de pêche 
et bien sur un champ commentaire
tout cela fonctionne peut être par magie ...
mais cela fonctionne

comme dans l exemple ci dessous 
ce sot les photos d une seule journee de peche 
donc l ID est celui de la photo en genral
puis le nom de l image nom_img
puis le nom pour la miniature nom_min
le pseusdo a qui correspond la photo
l id_img qui correspond a la journée de pèche de tel facon a ce que la bonne photo apparaisse sur la bonne journée de pèche du bon utilisateur


dans cet exemple c est toutes mes photos pour une journée de pêche bien précise

flexi2202 · Answer

dans la première page avant l envois de la photo je suis en possession de l id et du pseudo puis j arrive sur la page 2 ou les variables de la photos sont crées le contenu lui c est encore pour après donc il faut dans le JavaScript le pseudo et l id ? voici le code de la page 1 ave la dernière correction faite ou j ai ajouter le pseudo je suppose que je dois faire pareil avec l id ?? Hello, world!

phil le perleur

formulaire envoi de fichiers

flexi2202 · Answer

ouppss quelle erreur $pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL; $id = !empty($_GET['id']) ? $_GET['id']: NULL; if(isset($_GET['pseudo'], $_GET['id'])){ $pseudo = $_GET['pseudo']; $id = $_GET['id']; } pour ce qui est de la lige de code la variable pseudo récupéré les informations de la balise id donc je dois remplacer comme ceci var pseudo = document.getElementById('photo').value; ou alors var photo = document.getElementById('photo').value; si je réfère a cet exemple

flexi2202 · Answer

bonjour jordane

ma connexion est tres mauvaise

donc pour te repondre
tu m as dit que je devais rendre propre les variables avant l utilisation

comme je compte utiliser les variables id et pseudo je les rends propre ...car c est bien ce que tu fais 
$pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL;
$id = !empty($_GET['id']) ? $_GET['id']: NULL;

ensuite

if(isset($_GET['pseudo'], $_GET['id'])){
$pseudo = $_GET['pseudo'];
$id = $_GET['id'];
}

si les variables pseudo et id sont bien définie
je dis que la $pseudo est égal a l appel de la variable   pseudo
idem pour id


si je comprends ce que tu veux me faire comprendre 
si je rends propre les variables

elles ne peuvent plus être définies ?



Dans la variable pseudo .. tu veux y mettre ... le pseudo !
Alors pourquoi y mets tu le contenu de l'input photo ????

alors de ce cote je trouverais plus logique de mettre la variable pseudo dans pseudo

de cette façon

var  pseudo = document.getElementById('pseudo').value;

merci pour ta patience ...
en même temps je fais tout mon possible , mais le php ca reste du php idem pour le javascript
ou de ce cote c est encore très obscur 

je serais absent pour la journée ....

flexi2202 · Answer

bonjour Jordane merci pour la réponse l aide je ne maitrise pas encore toutes les subtilités de php pour quelqu'un comme toi , tu joues avec cela comme si cela était une petite marionnette et franchement j admire et je te dis bravo mais quelqu'un qui comme moi se retrouve la dedans comme ca au début mon code était censé être très simple et puis ben de fil en aiguille ... enfin bref pour ce qui est du début du code de nouveau je ne comprends pas bien dans un premier temps les variables sont mises a 0 jusque la je suis d accord mais ensuite je vérifie si les variables reçues sont bien définies pour ensuite les transmettre dans deux variables qui sont pseudo et id... ou alors j aurais du peut être rendre propre les deux variables pseudo et id que je crée et laisser mon début de code comme ceci if(isset($_GET['pseudo'], $_GET['id'])){ $pseudo = $_GET['pseudo']; $id = $_GET['id']; } donc pour la suite tu me conseilles de supprimer if(isset($_GET['pseudo'], $_GET['id'])){ $pseudo = $_GET['pseudo']; $id = $_GET['id']; } et d ajouter var pseudo = ''; var id= ''; et ensuite formdata.append("pseudo ", pseudo ); formdata.append("id", id); j ai essaye de modifier le code mais de nouveau le pseudo ne veux pas passer le code modifie du JavaScripts est le suivant

flexi2202 · Answer

je viens d aller voir 
et j ai un exemple

$x = $condition ? $trueVal : $falseVal;

//same as:

if ($condition) {
    $x = $trueVal;
} else {
    $x = $falseVal;
}


donc ce que tu me demandes c est d écrire autrement la ligne 
$unevariable = condition ? valeur si vraie : valeur si faux ;

if ($condition) {
    $unevariable = 'valeur si vraie';
} else {
    $unevariable = 'valeur si faux';
}

je pense que cela veux dire que si la condition est ok on affiche  $unevariable = 'valeur si vraie';
sinon on affiche $unevariable = 'valeur si faux';

flexi2202 · Answer

merci pour la correction , comme je t avais dit moi et le javascript on fait a peine connaissance 

je te rassure je pense avoir compris ce que veux dire l écriture temaire

pour les 4 lignes de mon codes je vais les enlever 
mais une fois le soucis de l upload réglé je reviendrais dessus afin de mieux comprendre  ...


pour ce qui est du code
je viens de faire les modifications 
mais après avoir vider le cache du navigateur

le message d erreur est toujours présent lors de l essai d un nouvel upload

{"message":"Votre fichier a \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 avec succ\u00e8s.>","error":" Erreur dans la requ\u00eate : SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'pseudo' cannot be null"}

flexi2202 · Answer

oui oui jordane j ai fait un copier coller voici le fichier modifie j ai donc fait un essai avec une image voila ce que donne la requête et la réponse et ensuite un upload sans image

flexi2202 · Answer

a chaque foi je vide le cache du navigateur par reflexe je l indique au post 77 voici le code complet et le nom du fichier est form-fichier.php Hello, world!

phil le perleur

formulaire envoi de fichiers

flexi2202 · Answer

oui j ai bien ceci

https://accessible-preparat.000webhostapp.com/nosignal/journee-peche/cible-fichier.php?pseudo=phil1&id=83

je le surveille depuis le début

flexi2202 · Answer

oui je le fais a chaque fois

je vais le relancer pour voir 

voici le message de la requete complet

https://www.cjoint.com/doc/21_05/KEEwwQ748Pt_message.txt

et voici l entête

flexi2202 · Answer

avec chrome et firefox c est pareil

flexi2202 · Answer

bne oui c est bien ce que je me disais 


voici donc une copie de la console avant l upload d un fichier

jordane45 · Answer

formulaire envoi de fichiers

flexi2202 · Answer

bonjour jordane un grand merci pour ce code mais de nouveau une erreur j ai donc fait un test j ai remis mon ancien fichier cible et on a plus d erreur donc il y a un soucis avec le fichier cible que tu m as refais le code j ai tente de trouver d ou cela pourrait provenir mais sans succes voici l ancien fichier

phil le perleur

"image/jpg", "JPG" => "image/JPG", "jpeg" => "image/jpeg", "JPEG" => "image/JPEG", "gif" => "image/gif", "png" => "image/png", "PNG" => "image/PNG" ); $filename = $_FILES["photo"]["name"]; $filetype = $_FILES["photo"]["type"]; $filesize = $_FILES["photo"]["size"]; // Vérifie l'extension du fichier $ext = pathinfo($filename, PATHINFO_EXTENSION); if (!array_key_exists($ext, $allowed)) die('Erreur : Veuillez sélectionner un format de fichier valide.
Pour recommencer'); // Vérifie la taille du fichier - 5Mo maximum $maxsize = 5 * 1024 * 1024; if ($filesize > $maxsize) die('Error: La taille du fichier est supérieure à la limite autorisée.
Pour recommencer'); // 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/" . $_FILES["photo"]["name"])) { echo $_FILES["photo"]["name"] . ' existe déjà.
Pour recommencer'; } else { move_uploaded_file($_FILES["photo"]["tmp_name"], "uploads/" . $_FILES["photo"]["name"]); echo 'Votre fichier a été téléchargé avec succès.>'; $req = $bdd->prepare('INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)'); $req->execute(array( 'pseudo' => $pseudo, 'id_img' => $id, 'nom_img' => $_FILES["photo"]["name"], 'nom_min' => $_FILES["photo"]["name"] )); } } else { echo 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.
Pour recommencer'; } } else { echo "Error: " . $_FILES["photo"]["error"]; } } } else { header('Location:../login-obligatoire-peche-perle.php'); die(); } ?>

et voici celui que tu avais redigè "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 // récupération PROPRE des variables de type "array" AVANT de les utiliser (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! ) $getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL; $pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: NULL; $id = !empty($_POST['id']) ? $_POST['id']: NULL; $photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL; // 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 && $photos["error"] == 0){ $filename = $photos["name"]; $filetype = $photos["type"]; $filesize = $photos["size"]; // Vérifie l'extension du fichier $ext = pathinfo($filename, PATHINFO_EXTENSION); if (!array_key_exists($ext, $allowed)) { $err = 'Erreur : Veuillez sélectionner un format de fichier valide.
Pour recommencer'; } // 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.
Pour recommencer'; // 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/" . $photos["name"])) { $err = $photos["name"] . ' existe déjà.
Pour recommencer'; } else { if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){ $err = "Erreur lors de l'upload du fichier"; }else{ $res['message'] = 'Votre fichier a été téléchargé avec succès.>'; //préparation de la requête et des variables $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)'; $datas = array( ':pseudo' => $pseudo, ':id_img' => $id, ':nom_img' => $filename, ':nom_min' => $filename ); //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 { $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.
Pour recommencer'; } } else { $err = "Error: " . $photos["error"]; } } } else { $err = "Méthode invalide"; } $res['error'] = $err; // On renvoi la réponse au format JSON echo json_encode($res); ?>

flexi2202 · Answer

jordane  merci pour ton aide
ce matin j ai tester ton nouveau fichier cible-fichier

alors voici après l envois du fichier
et  j ai reçu cette erreur dans la réponse
{"error":"Error: 0"}

et voici donc la requete



 et avant l envoi du fichier

il y a juste la page de mon site qui apparaît 
et rien dans requête 




pour ne pas rester les bras croises je voulais faire un test avec les anciens fichiers ...

flexi2202 · Answer

ok jordane 
voici la capture d écran de la console sans toucher a quoi que ce soit  ...

j ai regarder pour trouver ceci dans la console mais il n y a rien 
Regarder dans la console TOUT ce qui y est écrit
Chercher l'endroit ou on peut lire : "ID" xxxx et "PSEUDO" xxxx qui est généré par la ligne de code

flexi2202 · Answer

pour les essais je suis sous firefox et donc je vide le navigateur de cette façon et cela a chaque esai voici le code source de la page formulaire envoi de fichiers

`

//--------------------------------------------------------// var pseudo = 'phil1'; var id= '83'; 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 formdata = new FormData(); formdata.append("photo", file); formdata.append("pseudo ", pseudo ); formdata.append("id", id); //le temps des tests : alert('pseudo:' + pseudo + ' id: ' + id); console.log('ID',id,'PSEUDO',pseudo); // 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) : ""; 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"; } .

flexi2202 · Answer

ah mince je pensais que mon message était parti .... bon je recommence alors je fais mes tests sur firefox , donc pas de soucis pour vider complètement le navigateur je pratique de cette manière pour ce qui est du cache le voici formulaire envoi de fichiers

`

//--------------------------------------------------------// var pseudo = 'phil1'; var id= '83'; 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 formdata = new FormData(); formdata.append("photo", file); formdata.append("pseudo ", pseudo ); formdata.append("id", id); //le temps des tests : alert('pseudo:' + pseudo + ' id: ' + id); console.log('ID',id,'PSEUDO',pseudo); // 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) : ""; 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"; } .

flexi2202 · Answer

non aucun message d alerte

comme je te l ai déjà expliqué cela est un reflexe 
je vide mon navigateur avant chaque test

flexi2202 · Answer

non jordane 
hélas non  et je n ai cocher dans mon navigateur , je laisse toujours les options par défaut 
voici ce que j ai après l upload
aucune image dans le dossier uploads et rien non plus dans la base de donnée

on voit également que dans le fichier cible il y a l id et le pseudo

jordane45 · Answer

Je pense avoir compris l'erreur ... "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 // récupération PROPRE des variables de type "array" AVANT de les utiliser (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! ) $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; // 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"]; // Vérifie l'extension du fichier $ext = pathinfo($filename, PATHINFO_EXTENSION); if (!array_key_exists($ext, $allowed)) { $err = 'Erreur : Veuillez sélectionner un format de fichier valide.
Pour recommencer'; } // 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.
Pour recommencer'; // 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/" . $photos["name"])) { $err = $photos["name"] . ' existe déjà.
Pour recommencer'; } else { if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){ $err = "Erreur lors de l'upload du fichier"; }else{ $res['message'] = 'Votre fichier a été téléchargé avec succès.>'; //préparation de la requête et des variables $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)'; $datas = array( ':pseudo' => $pseudo, ':id_img' => $id, ':nom_img' => $filename, ':nom_min' => $filename ); //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 { $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.
Pour recommencer'; } } } 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);

flexi2202 · Answer

merci jordane pour la correction 
mais il y a un soucis avec une accolade  ...
j ai essaye de regarder ce qui pouvait clocher mais toutes les accolades sont bonnes

flexi2202 · Answer

hélas non jordane
après l envois du fichier j ai une nouvelle erreur

flexi2202 · Answer

merci jordane 
mais de nouveau après la réalisation de l upload  et après avoir vider le cache j ai un message 



par contre je viens de faire un essai et lorsque je suis sur la page form-fichier avec chrome et après avoir vider le cache ..
j ai la même chose avec internet explorer


on dirait que le code javascript n est pas pris en compte

jordane45 · Answer

Comment, peux-tu avoir dans l' url le chemin vers le fichier cible PHP alors que tu fais de l'Ajax... ???
Tu n'as pas laissé le bouton en Submit par hasard ??

flexi2202 · Answer

alors la jordane c est surement pas a moi a poser cette question cela reste du grand mystère non je n ai rien changer a ton code

flexi2202 · Answer

alors la jordane je n en sais rien non pas du tout j ai laisse le code tel quel

flexi2202 · Answer

désolé je pensais que le message n avait pas passé

flexi2202 · Answer

tu vas être déçu 
car cela n a rien change ...même après le nettoyage du navigateur

flexi2202 · Answer

oui en effet je ne parviens plus a passer sur la page fichier-cible.php je retire ceci action="cible-fichier.php?pseudo=&id="

flexi2202 · Answer

ah bon , c est toujours bon a savoir

voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php

flexi2202 · Answer

ah bon , c est toujours bon a savoir voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php Comment ça tu ne parviens plus à passer sur la page fichier-cible.php .... COmment peux tu me dire OK c'est bon à savoir et ensuite me dire ça .. ??? c est toujours bon a savoir avec le //--------------------------------------------------------// // ON PLACE LE JAVASCRIPT JUSTE AVANT le //--------------------------------------------------------// var pseudo = ''; var 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 formdata = new FormData(); formdata.append("photo", file); formdata.append("pseudo ", pseudo ); formdata.append("id", id); //le temps des tests : alert('pseudo:' + pseudo + ' id: ' + id); console.log('ID',id,'PSEUDO',pseudo); // 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) : ""; 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"; } j ai également une question pourquoi avoir corriger la page fichier-cible.php si cela n est plus pour l utilisée ...

flexi2202 · Answer

ah d accord jordane ...
merci pour l information 
je suis encore tres loin de pouvoir effectuer ce genre de chose hein 

quoi qu il en soit 
rien n a changer le code ajax est toujours dans le fond de la page

flexi2202 · Answer

oui jordane c est celui que tu as corrige formulaire envoi de fichiers

flexi2202 · Answer

mais c est bien le fichier qui contient le formulaire ...
je n ai que deux fichiers 

un fichier" form-fichier.php"
et l autre "fichier-cible.php"

ah tu veux dire celui qui s affiche dans le code source du navigateur ?

flexi2202 · Answer

formulaire envoi de fichiers

`

//--------------------------------------------------------// var pseudo = 'phil1'; var id= '83'; 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 formdata = new FormData(); formdata.append("photo", file); formdata.append("pseudo ", pseudo ); formdata.append("id", id); //le temps des tests : alert('pseudo:' + pseudo + ' id: ' + id); console.log('ID',id,'PSEUDO',pseudo); // 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) : ""; 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"; }

flexi2202 · Answer

je pense que la ligne 154 pose problème

flexi2202 · Answer

voila donc le code n apparaît plus cette fois dans la bas de page 

j ai une erreur juste au dessus de la console 
j ai un message d erreur qu une feuille de style n a pas pu être chargée
j ai tout de suite pense a boostrap et la fin de page du modèle de base 
j ai donc ajouter le bas de page 
mais l erreur persiste 

voici une copie de la console

flexi2202 · Answer

je suis occupé a chercher l erreur tel quel sur google mais je la trouve pas 

on ne parle pas de scss

flexi2202 · Answer

ok jordane ca me rassure 
bon ben dans ce cas 
voici la console avant le chargement du fichier et lorsque j essaye d uploader un fichier rien ne se passe

flexi2202 · Answer

quand je fais un upload
voici ce que j ai dans la console


et voici dans reponse ce que j ai

flexi2202 · Answer

merci pour l aide jordane

pour le POST c est ok

concernant le bouton ONCHANGE 
il venait du code que tu m avais donne
mais bref j ai change

dans la console je n ai que des GET

voici une capture avant l upload


et une après l upload il y a du nouveau enfin

flexi2202 · Answer

ensuite je clic sur ok et la il y a la barre de progression qui fonctionne 
mais le fichier n est pas dans la base de donnée ni dans le dossier upload

flexi2202 · Answer

ok jordane 
voici donc la réponse avec un POST

cela a été effectue après l upload

flexi2202 · Answer

voici le fichier message complet

https://www.cjoint.com/doc/21_05/KEFvs4XStS2_1.txt

flexi2202 · Answer

euhhh je suis pas le seul responsable ...
mais j apprécie tout ce que tu fais 
voici donc la réponse

flexi2202 · Answer

voila je vois que tu as crée une journée de pêche
donc tu connais le fonctionnement a présent 

voici une copie avec le bouton brut activer

jordane45 · Answer

Tu as encore un IF qui n'était pas fermé ( la vérif de la taille de l'image) Essaye comme ça "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 // récupération PROPRE des variables de type "array" AVANT de les utiliser (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! ) $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; // 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"]; // Vérifie l'extension du fichier $ext = pathinfo($filename, PATHINFO_EXTENSION); if (!array_key_exists($ext, $allowed)) { $err = 'Erreur : Veuillez sélectionner un format de fichier valide.
Pour recommencer'; } // 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.
Pour recommencer'; }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/" . $photos["name"])) { $err = $photos["name"] . ' existe déjà.
Pour recommencer'; } else { if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){ $err = "Erreur lors de l'upload du fichier"; }else{ $res['message'] = 'Votre fichier a été téléchargé avec succès.>'; //préparation de la requête et des variables $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)'; $datas = array( ':pseudo' => $pseudo, ':id_img' => $id, ':nom_img' => $filename, ':nom_min' => $filename ); //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 { $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.
Pour recommencer'; } } } } 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;

flexi2202 · Answer

merci jordane encore et encore merci pour ce code
mais cela ne fonctionne pas encore 

voici la réponse de POST

flexi2202 · Answer

mais cette fois les images vont bien dans le dossier uploads 
par contre rien dans la base de donnée

flexi2202 · Answer

je n en reviens pas cela fonctionne enfin 
tout cela pour un espace de trop 

un très très grand merci jordane tu as fini par solutionner mon problème 
et de nouveau j ai encore appris pas mal de choses

toutes mes félicitations pour cet exploit

concernant les codes de ces journées de pêches c est une personne de plus de 70 ans qui me les avais fais ...
mais bon je le remercie aussi 
cela était au début ou je ne savais pas encore que le php commençait par des balises  
pour te dire ...
mais je me rends compte que je vais devoir les reprendre une a une et améliorer le codage 


encore merci 

passe une bonne nuit

flexi2202 · Answer

bonjour a tous

 voila a présent je souhaiterais pouvoir ajouter un commentaire a la photo 
es ce possible de le faire de manière simple sans devoir changer tout le code

flexi2202 · Answer

merci pour l aide
oui en temps que l envois de la photo
je viens d essayer mais bien évidement cela ne fonctionne pas 

je dois ouvrir un nouveau sujet ?

flexi2202 · Answer

j ai réparer plusieurs erreurs mais il y en a une qui me résiste

voici la console

flexi2202 · Answer

merci pour ton aide
ah ben c est déjà une bonne nouvelle cela
dans l onglet réponse il n y a rien

flexi2202 · Answer

dans la page fichier-from j ai ajouter ceci $contenu = !empty($_FILES["contenu"]) ? $_FILES["contenu"] : NULL; et j ai modifier ceci //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 ); et j ai bien évidement ajouter ceci en html

Le message

flexi2202 · Answer

voila j ai trouve l erreur
il manquait une virgule a $filename

   $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename,
					  ':contenu' => $contenu
                  );

mais j ai une autre erreur

j essaye de trouver ...

flexi2202 · Answer

voici ce que j ai 
ca ressemble a une erreur d hier

flexi2202 · Answer

merci pour les renseignements et l explication jordane

lors de l essai j ai mis un commentaire ...

avec celle ci 

$contenu = !empty($_FILES["contenu"]) ? $_FILES["contenu"] : NULL;

et je ne sais pas si cela est valable mais vu le codage foireux que la personne agee m a fait 
pour que le code fonctionne j a vais mis dans ma base de donnée a la colonne contenu 
tel que défini 0

flexi2202 · Answer

je n ai plus d erreur jordane merci 
mais dans la colonne contenu de ma base de donnée le commentaire que j ai écrit dans le formulaire n y apparaît pas

flexi2202 · Answer

il me manque peut être la VAR contenu var contenu = _("contenu").contenu[0]; autrement je ne vois pas bien ce que j aurais oublie

flexi2202 · Answer

j ai essaye la modification suivante jordane 
mais cela ne passe pas 

apparemment j ai du mal définir la variable

function uploadFile(){
        var file = _("photo").files[0];
		var contenu = _("contenu").contenu[0];
        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;..

flexi2202 · Answer

euhhh je sais pas jordane j ai fait comme avec la variable file

comment je peux voir ce que cette variable retourne avec un var_dump ??

car avec ceci

   console.log('ID',id,'PSEUDO',pseudo,'CONTENU',contenu); // pour voir si les variables se remplissent bien dans la console;..
cela ne fonctionne pas car on bloque sur la variable contenu

d ailleurs le message dans la console est clair cela ce passe bien dans 

Uncaught ReferenceError: uploadFile is not defined

j ai aussi essaye avec cela 

 var file = _("photo").files[0];
		var contenu = _("contenu").contenu;
		var contenu = '<?php echo $contenu ;?>';
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo", pseudo );
        formdata.append("id", id);
        formdata.append("contenu", contenu);

dans l espoir de voir apparaître la variable contenu

flexi2202 · Answer

honnêtement je ne sais pas du tout a quoi sert cette variable et c est que depuis le début j ai envie de la retirer mdrrr

  function _(el) {
        return document.getElementById(el);
      }

d après une recherche sur le web 
La méthode JavaScript getElementById() permet de récupérer les informations d'une balise identifiée par son id.

donc j en aurais besoin de deux ..puisque deux id

flexi2202 · Answer

merci jordane pour la pédagogie

ah d accord pour document.getElementById

mais alors dans mon cas cela ne sert a rien puisque je n ai pas de ID el ??

ouftiii pas mal cette démonstration avec les VAR
je m en souviendrais quand je vais en revoir ...

donc si je comprends bien dans mon code js

je dois supprimer ceci
var contenu = _("contenu").contenu[0];

et remplacer  par 
var input_contenu = _("contenu");
var contenu =input_contenu.value;

flexi2202 · Answer

merci jordane pour la pédagogie 
cela est très intéressant 

donc comme on ne possède pas de id el 
ce morceau de code ne sert plus a rien ?

si je comprends bien 

je remplace 
var contenu = _("contenu").contenu[0];

par 

var input_contenu = _("contenu");
var contenu =input_contenu.value;


et donc cette ligne reste comme elle est
formdata.append("contenu", contenu);

et dans la partie php comment je rrends plus propre cette variable comme ceci

$contenu = !empty($_contenu["contenu"]) ? $_contenu["contenu"] : "";

flexi2202 · Answer

ah ben oui évidement j étais trop  dans le bazar de ajax

donc comme pour le pseudo 

$contenu = !empty($_post["contenu"]) ? $_post["contenu"] : "";

flexi2202 · Answer

merci jordane mais j ai encore une erreur dans ma console lors de l envois du fichier

Uncaught ReferenceError: uploadFile is not defined

flexi2202 · Answer

ah mince merci jordane 
je n ai plus aucune erreur mais aucune trace du commentaire dans ma base de donnée

flexi2202 · Answer

merci jordane pour l aide alors en javascript c est bien envoyé puisque dans la console je le vois 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;.. et dans la requête tout est bon alors c est dans le php j ai donc en html le code pour le commentaire

Le message

ensuite nos variables propres $contenu = !empty($_post["contenu"]) ? $_post["contenu"] : ""; et l insertion base de donnee //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(); } } } et donc voici comme se présente ma ligne dans ma base le champs est un varchar

flexi2202 · Answer

misère 
ces espaces , ces ' ou encore ces majuscules 
dur dur la vie

mais bonne nouvelle cela fonctionne super bien a présent un giga merci jordane 
une dernière chose est il possible d effacer le contenu du textarea après l envois du fichier 
et pourquoi pas le nom du fichier uploader

flexi2202 · Answer

ah c est super cela merci jordane 

et donc je les inscris ou ces codes a quel endroit du code 
je suppose a la fin 

après ceci

   function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";
      }
      function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";
      }

et pour l image ca sera donc

document.getElementById("photo").value="";


oui je mettrais en résolu des que je serais quoi pour ce dernier détail

flexi2202 · Answer

eh bien voila 
c est enfin fini pour cette partie jordane encore une fois un très grand merci 
passe une bonne soirée

Ajout d une barre de progression sur l upload des images

109 réponses