Wulab.com

Vous avez créé un formulaire pour envoyer sur votre serveur, une image, une vidéo, ou tout autre fichier et le problème c'est que vous ne connaissez pas l'avancement de la situation car php ne gére pas en natif la vitesse de transfert, le temps restant et l'avancement dans l'upload du fichier envoyé par vos visiteurs.

Aprés avoir testé plusieurs techniques pour gérer cette barre de progression lors d'un upload de fichier, un seul procédé pour l'instant m'a paru satisfaisant...


Les techniques pour voir la progression de l'upload

Je ne vous présente ici que des méthodes qui ne nécessitent pas de patcher PHP.

Ajax permet d'interroger le serveur pendant le transfert mais on ne connait pas la taille totale du fichier. Avec cette technique, vous aurez simplement la taille du fichier en cours de téléchargement, ce qui donne déjà une bonne indication sur l'avancement du transfert car en général le visiteur connait la taille du fichier qu'il envoie...
Télécharger php upload progress avec ajax

Avec du Perl et du php, il existe une solution un peu compliquée à mettre en oeuvre : Mega Upload qui gére le multi upload.



Venons-en à la technique la plus simple, la plus efficace et la plus aboutie au niveau de la qualité graphique :

L'upload avec Flash
Pour pouvoir bénéficier de cette barre de progression avec flash, il faut utiliser la version 8 (ou supérieur). Cette nouveauté apparue avec flash 8 est possible grace à FileReference dans Action Script.




Les sources du programme sont fournies, vous pouvez donc facilement le modifier et l'adapter à votre site :

import flash.net.FileReference;

var file_fr:FileReference = new FileReference();
var list_obj:Object = new Object();
file_fr.addListener(list_obj);
var my_pb:mx.controls.ProgressBar;

// Utilisation en mode manuel
// pour lui dire quoi afficher
my_pb.mode = "manual";
// Some makup for the progress bar
my_pb.conversion = 1024;
my_pb.labelPlacement = "top";
my_pb.label = "%3%% Uploadé (%1Ko/%2Ko)";
// The progress bar will be visible when we neet it
my_pb._visible = false;


// type de fichiers acceptables
// j'ai modifié la source pour accepter toutes les extensions
// il est plus prudent de vérifier le type du fichier en php...
browse_butn.clickHandler = function(){
file_fr.browse([{description: "tous", extension: "*"}]);
}

// Afficher le nom du fichier
// Appel de la page d'upload php
list_obj.onSelect = function(){
name_txt.text = file_fr.name;
file_fr.upload("upload.php");
}

// Action pendant l'upload
// Affichage de la barre de progression
list_obj.onProgress = function (bytesTotal, bytesLoaded){
my_pb._visible = true;
my_pb.minimum = 0;
my_pb.maximum = file_fr.size;
my_pb.setProgress(bytesLoaded, my_pb.maximum);
}

// Action quand l'envoi est terminé
list_obj.onComplete = function(){
name_txt.text = "Votre fichier a été envoyé";
my_pb._visible = false;
}


// Autres fonctions
list_obj.onCancel = function(){
name_txt.text = "Annulé";
}

list_obj.onIOError = function(fileRef){
name_txt.text = "IO error with " + fileRef.name;
}

list_obj.onSecurityError = function(fileRef, error){
name_txt.text = "Security error with " + fileRef.name + ":" + error;
}

list_obj.onHTTPError = function(fileRef:FileReference, error:Number){
name_txt.text += "HTTP error: with " + fileRef.name + ":error #" + error;
}

Le fichier php fourni est minimaliste et doit être sécurisé en fonction de vos besoins bien sûr:


<?php if (isset($_FILES['Filedata']['name'])) {

   $uploadDir = "./";

   $uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);

   move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);

}  ?>



Source flash : Le site web d'origine ne semble plus opérationnel.
Voici le fichier flash à télécharger : Upload flash avec barre de progression.
Gestion des chargements de fichiers en php

---