Bonjour à tous,
Il est nativement impossible d'afficher la progression de l' upload d'un fichier en php. Si votre site web propose un espace d'upload pour vos visiteurs il peut s' avérer intéressant d'afficher la progression de l'upload. En effet la bar de de progression prouve son utilité surtout pour les gros fichiers afin d'informer vos visiteurs sur l'état d'avancement du fichier qu'il souhaite envoyé.
Cependant il existe plusieurs solutions afin de combler ce manque.
Solutions qui sont plus ou moins facile à mettre en œuvre.
Je vais donc tenter de vous expliquer comment réaliser ceci avec flash javascript et php.
- bar de progression.png (2.81 Kio) Vu 586 fois
Minimum Requis:
- flash 8
- PHP
- Internet Explorer
Important ! Il est conseillé d'utiliser cette bar de progression flash sous Internet Explorer. Elle est fonctionnelle sous Firefox mais vous rencontrerez des problèmes avec les sessions php si jamais vous tenté d'adapté le code à vos besoins( enregistrement dans une bdd par exemple ...)
Étape 1: le fichier JavaScript
Ouvrez un fichier nouveau fichier .js que vous appelerez progress.js puis copiez ceci.
Tous les lignes sont détaillés et le code est assez explicite.
- Code: Tout sélectionner
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;
}
Étape 2 : Appel de la bar de progression flash
Appelé la page où vous souhaité afficher votre bar de progression upload.php puis copier
- Code: Tout sélectionner
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="262" height="50">
<param name="movie" value="fileUpload.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="fileUpload.swf" width="262" height="50">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
Étape 3: Le script php
Voici le script php qui peut servir à d'éventuelle vérifications et à la copie du fichier uploadé dans un répertoire.
Il est conseillé de le mettre à la suite du code d'appel de la bar de progression
- Code: Tout sélectionner
<?php if (isset($_FILES['Filedata']['name'])) {
$uploadDir = "./"; // répertoire de destination
$uploadFile = $uploadDir . basename($_FILES['Filedata']['name']); // répertoire de destination + nom du fichier
move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile); // copie du chier dans le répertoire de destination
} ?>
Ceci étant une solution parmi tant d'autre voici d'autre méthodes pour afficher une bar de progression:
SWFUpload
Bar de progression avec Ajax
de