Bonjour.
J'ai trouvé deux fichiers PHP permettant d'envoyer des fichiers vers un serveur.
Ils s'appellent:
index.php et upload.php et se trouvent dans un répertoire nommé "barreprogressdynamique".
Un sous répertoire s'appelant "files" est créée pour recueillir les fichiers envoyés.
Lorsque je lance index.php en local sous wamp voici ce qui apparait sous Firefox:
En insérant un fichier à partir du bouton parcourir cela fonctionne et apparait à la place de "Aucun fichier sélectionné" le nom du fichier à télécharger avec son extension.
Mais lorsque je clique sur "Uploader le fichier", rien ne se passe.
Voici les codes du fichier index.php auxquels j'y ai ajouté des commentaires:
Ainsi que le fichier upload.php :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63 <!DOCTYPE html> <html lang="fr"> <head> <title>Barre de progression dynamique en HTML5</title> <meta charset="utf-8" /> <script> function _(elmt){//fonction pour nom underscore return document.getElementById(elmt); } function uploadFichier(){ var file = _('file').files[0];// Tableau ayant pour nom files.[0] pour avoir accès au premier fichier alert(file.name); var data = new Formdata();//Pour formater le fichier alert(file.name); data.append('file', file);//Pour ajouter le fichier à l'objet data.Accessible par 'file' et placé en paramètre par file. // Outil AJAX var ajax = new XMLHttpRequest();// Création d'une requette AJAX pour créer un nouvel objet afin de dialoguer avec le fichier upload.php. upload fait référence au téléchargement lorsqu'on charge le fichier au niveau du serveur. ajax.upload.addEventListener("progress", progressHandler, false);//Lorsque le fichier est en cours d'envoi on appelle la fonction progressHandler. addEventListener est une méthode. ajax.addEventListener("load", completeHandler, false);//lorsque le chargement est terminé on appelle la fonction completeHandler ajax.addEventListener("error", errorHandler, false);//Lorsqu'il y a une erreur de chargement on appelle la fonction errorHandler ajax.addEventListener("abort", abortHandler, false);//Lorsqu'il y a un arrêt du chargement on appelle la fonction abortHandler ajax.open("POST", "upload.php");//On ouvre une connexion au niveau serveur en mode POST avec le fichier upload.php choisi comme cible. ajax.send(data);//Avant de terminer la connexion, on envoie la donnée data qui est le fichier formaté pour être envoyé. } function progressHandler(event){//On récupère via le paramètre event le nombre de bytes. _('status_bytes').innerHTML = event.loaded + 'bytes uploadé sur' + event.total;//event.loaded est égale au nombre de bytes téléchargés. var pourcentage = (event.loaded / event.total) * 100;//Détermine le pourcentage de téléchargement en temps réel. _('progressBar').value = Math.round (pourcentage);// indique la progression de la barre de téléchargement. _('status').innerHTML = Math.round (pourcentage) + '% uploadé... Patientez'; // indique le pourcentage de bytes téléchargés en temps réels. } function completeHandler(event){//Fonction exécutée lorsque le téléchargement est terminé. _('status').innerHTML = event.target.responseText;//event.target fait référence au fichier upload.php pris pour cible et récupère dans responseText la réponse que ce fichier envoie.(voir les 3 echo du fichier upload.php). _('progressBar').value = 0;//Pour remettre la barre de téléchargement à zéro lorsque celui ci est terminé. } function errorHandler(){ _('status').innerHTML = "L'upload a échoué!"; } function abortHandler(){ _('status').innerHTML = "L'upload a été annulé!"; } </script> </head> <body> <h1>Barre de progression dynamique en HTML5</h1> <form method="post" enctype="multipart/form-data"><!-- method pour JavaScript--> <input type="file" multiple id="file" name="file" /></br><!-- multiple id="file" pour plusieurs fichiers--> <input type="button" value="Uploader le fichier" onclick="uploadFichier()" /></br><!-- Appel de la fonction uploadFichier--> <progress id="progressBar" value="0" max="100" style="width:500px"></progress><!-- Balise "progresse" depuis HTML5--> <!--<progress id="progressBar" aria-valuemin="0" aria-valuemax="100" style="width:500px"></progress>--> </form> <h2 id="status"></h2><!-- Pour indiquer le pourcentage de chargement fichier vers le serveur--> <p id="status_bytes"></p><!-- Pour indiquer ne nombre de bytes chargés en temps réel--> </body> </html>
Ne possédant pas de connaissances en AJAX, je ne maîtrise pas tous les codes du fichier index.php.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 <?php if (!empty($_FILES)){//Vérifie la présence d'un fichier dans la superglobale $_FILES. $nomFichier = $_FILES['file']['name'];//Enregistrement du fichier dans $nomFichier où ['file'] est l'dentifiant de $_FILES. $tempRep = $_FILES['file']['tmp_name'];//$tempRep pour le répertoire temporaire. //$tailleFichier = $_FILES['file']['size'];//$tailleFichier pour obtenir la taille du fichier (en option). //$typeFichier = $_FILES['file']['type'];//$typeFichier pour obtenir le type du fichier (en option). $error = $_FILES['file']['error'];// Si pas d'erreur on aura une valeur égale à zéro. if ($error !=0 || !$tempRep){//Si erreur ou fichier ne se trouvant pas dans $tempRep echo 'Erreur: Le fichier n\'a pas pu être uploadé'; die(); } if(move_uploaded_file($tempRep, 'files/'.$nomFichier)){//Si le fichier se trouvant dans $tempRep est transféré dans le dossier files echo 'Chargement du fichier'.$nomFichier.'terminé !';//Le fichier se trouve dans le dossier files. }else{ echo 'Une erreur est survenue lors de l\'envoi du fichier'; } } ?>
Alors si quelqu' un pourrait m'aider à trouver l' erreur, cela me serait bien utile pour développer mon site communautaire.
Néanmoins j'ai relu plusieurs fois et à plusieurs jours d' intervalles les codes afin de débusquer des erreurs de syntaxes.Et je peux dire qu'aujourd'hui il n'y en a plus.
Si nécessaire, je peux aussi indiquer la source de ces codes à la personne disposée à m'aider.
Voici les fichiers: index.php et upload.php
Merci d'avance.
Partager