Barre de progression dynamique en HTML5

3 pièce(s) jointe(s)

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:
Pièce jointe 184915
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:

Code:

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>

Ainsi que le fichier upload.php :

Code:

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

Ne possédant pas de connaissances en AJAX, je ne maîtrise pas tous les codes du fichier index.php.
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: Pièce jointe 184916 et Pièce jointe 184917
Merci d'avance.

Bonjour,
J'ai trouvé ce qui n'allait pas.
C'est la ligne 15 du fichier index.php qui possédait une erreur.
Voici la correction:

Code:

var data = new FormData();

Comme quoi cela tient à très peu de choses parfois.
Résolu pour moi.

impossible de faire marcher cette barre

Bonjour,
J'ai les mêmes sources que toi, et j'ai le même problème, la barre ne marche pas. J'ai lu et relu les codes --> je sèche complètement.
Quelle était l'erreur en ligne 15 ? On ne la voit pas, car dans le fichier index.php, c'est exactement ce que tu dis avoir trouvé comme erreur .....
Ou alors, je ne vois plus rien, depuis le temps que je cherche !...

Un petit coup de mains svp .

Ça y est, j'ai trouvé dans new FormData(), le D de data doit être en majuscule. Je ne pensais pas que cela pouvait coincer à ce niveau-là .
Problème résolu.