Vous êtes sur la page 1sur 9

POUR LES DBUTANTS

Crer une barre


de progression grce
PHP 5.4
La version de PHP 5.4 vient avec son lot de nouveauts et propose
dsormais de suivre la progression dun fichier en cours de
tlchargement grce aux nouvelles directives et variables de session.
Dans cet article, nous allons donc apprendre exploiter au mieux ces
nouvelles fonctionnalits. Nous allons galement construire une micro-
application Web pour le tlchargement et laffichage dimages.

Cet article explique : Ce quil faut savoir :


t -FTOPVWFMMFTEJSFDUJWFTEFTFTTJPOBJOTJRVFMFVSTVUJMJUT t $POOBJTTBODFCBTJRVFEF1)1 )5.-BJOTJRVF+BWB4DSJQU
t $SFS VO GPSNVMBJSF EF UMDIBSHFNFOU EJNBHFT FO )5.-  t "WPJSVOFNBDIJOFBWFD1)1JOTUBMM
BJOTJRVFTPOUSBJUFNFOUDUTFSWFVS t 6OOBWJHBUFVS8FCTVQQPSUBOU)5.- UPVUFTMFTWFSTJPOTS-
t 4VJWSF MB QSPHSFTTJPO EVO USBOTGFSU EF DIJFS FO UFNQT SFM centes le supporte).
HSDFBVYSFRVUFT"+"9

A
nul.

snippet Perl ou installer lextension PECL uploadpro-

.
session.upload_progress.name
-

- <input type=hidden name=<?php echo ini_get(session.


sentes dans le Tableau 1 upload_progress.name);?>
session.upload_progress.freq et session. value=NON_DE_VOTRE_SESSION />
upload_progress.min_freq
- -
-

HORS SRI
46 phpsolmag.org/fr
Barre de progression

Tableau 1. Nouvelles directives de session permettant de traquer la progression dun fichier

Nom de la directive Description Valeur par dfaut

session.upload _ progress.enabled 1FSNFUEFUSBRVFSMBQSPHSFTTJPOEhVOUSBOTGFSUEBOT On


la variable super-global $ _ SESSION

session.upload _ progress.cleanup /FUUPJFMFTJOGPSNBUJPOTEFQSPHSFTTJPOETRVF On


UPVUFTMFTEPOOFT1045POUUMVFT RVBOEVO
tlchargement est termin).

6OQSYFVUJMJTQPVSMBDMEFMBQSPHSFTTJPO upload_progress_
du tlchargement dans la variable super-global
$ _ SESSION

session.upload _ progress.name -FOPNEhJOEFY FODIBOBWFDMFQSYF


EBOT 1)1@4&44*0/@61-0"%@
MBWBSJBCMFTVQFSHMPCBM@4&44*0/ 130(3&44

session.upload _ progress.freq -BGSRVFODFEFMBQSPHSFTTJPOEVUMDIBSHFNFOU 1%


RVJEPJUUSFNJTKPVS

session.upload _ progress.min _ freq -FEMBJNJOJNVNFOUSFMFTNJTFTKPVS FOTFDPOEFT 1

. $_POST[ini_get(session.upload_progress.name)]); $_
var_dump($_SESSION[$sSessionKey]); SESSION[$sSessionKey][cancel_upload] la valeur TRUE.

-
-
fert. -

Listing 1. Donnes de progression stockes en session

<?php
$_SESSION[upload_progress_NON_DE_VOTRE_SESSION] = array(
start_time => 1234567890, // Lheure de la requte
content_length => 57343257, // Longueur du contenu POST
bytes_processed => 453489, // Quantit doctets reus et traits
done => false, // TRUE lorsque le gestionnaire POST a termin avec succs, sinon FALSE

0 => array(

name => image.png,


tmp_name => /tmp/phpHYOAod,
error => 0,

start_time => 1234567890, // Lheure de dbut de requte

),
)
);

HORS SRI
phpsolmag.org/fr 47
POUR LES DBUTANTS

Listing 2. Fichier index.php qui contient le formulaire

<?php
/**
* Check the version of PHP
*/
if (version_compare(phpversion(), 5.4.0, <))

/**
* Check if session upload progress is enabled
*/
if (!intval(ini_get(session.upload_progress.enabled)))

this script.);

require_once Upload.class.php;
?>
<!DOCTYPE html>
<html lang=en-US>
<head>
<meta charset=utf-8 />
<title>PHP 5.4 Session Upload Progress Bar Demo</title>
<meta name=description content=PHP 5.4 Session Upload Progress Bar />
<meta name=keywords content=PHP, session, upload, progress bar />
<meta name=author content=Pierre-Henry Soria />
<link rel=stylesheet href=./static/css/common.css />
</head>

<div id=container>

<header>

</header>

<!-- Debug Mod --> <!-- <form action=upload.php?show_transfer=on method=post id=upload_form


enctype=multipart/form-data target=result_frame> -->
<form action=upload.php method=post id=upload_form enctype=multipart/form-data target=result_
frame>

<legend>Upload Images</legend>
<input type=hidden name=<?php echo ini_get(session.upload_progress.name);?> value=<?php

accept=image/* required=required />

CTRL key.</em></small></label>
<button type=submit id=upload>Upload!</button>
<button type=reset id=cancel>Cancel Upload</button>

<!-- Progress bar here -->


<div id=upload_progress class=hidden center progress>
<div class=bar></div>
</div>

</form>

<footer>

</footer>

HORS SRI
48 phpsolmag.org/fr
Barre de progression

</div>

<script>
$(#upload).click(function() {
(new UploadBar).upload();
});
$(#cancel).click(function() {
(new UploadBar).cancel();
});
</script>
</html>

error du tableau $_FILES -


nie .

Utiliser AJAX pour une progression


en temps rel

<form action=upload.php?show_transfer=on
- method=post id=upload_form
enctype=multipart/form-data target=result_frame>

le serveurs. -
-

$_SESSION et
ainsi que lattribut multiple (disponible depuis HTML5) $_FILES
-

upload()
addFile() progress()
-
for. Voir Listing 4.
accept cancel() -

image/* - fadeOut()
faire disparaitre la barre de progression.
progress()
- upload()

- show()
bilit hidden pour quelle ne soit pas visible par dfaut.
Par la suite, nous allons la rendre visible pendant le resetProgressBar() est utili-
se par upload() et cancel() pour rinitialiser la barre de
progression 0%
oMe faisant ap-
de la page. pel la variable this

HORS SRI
phpsolmag.org/fr 49
POUR LES DBUTANTS

Listing 3. upload.php

<?php
require_once Upload.class.php;

/**

* using the var_dump PHP function.


* Otherwise it sends the image to the server and displays with information about the image.
*/

echo (new Upload)->$sMethod();

Listing 4. Classe Upload.class.php

<?php
class Upload
{

private $_sMsg, $_sUploadDir, $_sProgressKey;

private $_aErrFile = [

the HTML form.,

UPLOAD_ERR_NO_TMP_DIR => Missing a temporary folder.,

];

public function __construct()


{

if ( === session_id()) session_start();

$this->_sUploadDir = ./uploads/;

/**
// You can also retrieve the session this way.

upload_progress.name)]);
*/
}

/**
* @return integer Percentage increase.
*/
public function progress()
{
if(!empty($_SESSION[$this->_sProgressKey]))
{
$aData = $_SESSION[$this->_sProgressKey];
$iProcessed = $aData[bytes_processed];

HORS SRI
50 phpsolmag.org/fr
Barre de progression

$iLength = $aData[content_length];
$iProgress = ceil(100*$iProcessed / $iLength);
}
else
{
$iProgress = 100;
}

return $iProgress;
}

/**

*/
public function addFile()
{
if(!empty($_FILES))
{
$this->_sMsg = ;

foreach($_FILES as $sKey => $aFiles)


{
for($i = 0, $iNumFiles = count($aFiles[tmp_name]); $i < $iNumFiles; $i++)
{
/**
* Assign values of array in simple variables.
*/
$iErrCode = $aFiles[error][$i];

$sFileName = $aFiles[name][$i];
$sTmpFile = $aFiles[tmp_name][$i];
$sFileDest = $this->_sUploadDir . $sFileName;
$sTypeFile = $aFiles[type][$i];

/**

*/

{
if($iErrCode == UPLOAD_ERR_OK)
{

, $sTypeFile) . <br />;

$this->_sMsg .= <a href= . $sFileDest . title=Click here to see the original

}
else
{

}
}
else
{

HORS SRI
phpsolmag.org/fr 51
POUR LES DBUTANTS

}
}
}
}
else
{

}
return $this;
}
/**

*/
public function show()
{
ob_start();

var_dump($_FILES);
echo </pre>;

var_dump($_SESSION);
echo </pre>;
$this->_sMsg = ob_get_clean();

return $this;
}
/**

*/
public function cancel()
{
if (!empty($_SESSION[$this->_sProgressKey]))
$_SESSION[$this->_sProgressKey][cancel_upload] = true;

return $this;
}
/**

*
* @param integer $iStatus, 1 = success, 0 = error

*/

}
/**

*
* @return string
*/
public function __toString()
{
return $this->_sMsg;
}

HORS SRI
52 phpsolmag.org/fr
Barre de progression

Listing 5. Classe UploadBar.class.js pour rcuprer les informations sur la progression en AJAX

function UploadBar()
{

this.upload = function()
{
this.resetProgressBar();

// Submit the form


$(#upload_form).submit();

setTimeout(function() {oMe.progress()}, 1500);


};

this.cancel = function()
{

{
console.log(Upload cancelled);
});

this.resetProgressBar();
$(#upload_progress).delay(2000).fadeOut();
};

this.progress = function()
{

{
var sPercentage = iPercentage + %;

$(#upload_progress).show();
$(#upload_progress .bar).html(sPercentage);
$(#upload_progress .bar).width(sPercentage);

if(iPercentage < 100)


setTimeout(function() {oMe.progress()}, 500);
});
};

this.resetProgressBar = function()
{
$(#upload_progress .bar).html(0%);
$(#upload_progress .bar).width(0%);
};

HORS SRI
phpsolmag.org/fr 53
POUR LES DBUTANTS

Listing 6. Fichier download_progress.ajax.php 4VS*OUFSOFU


<?php
t http://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar La
totalit du code source aborde dans cet article,
require_once Upload.class.php;
t http://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar/blob/
$sParameter = (!empty($_POST[param])) ? strip_ master/static/css/common.csso-FDIJFS$44EVQSPKFURVJOFTU
QBTWPRVEBOTDFUBSUJDMF
$oUpload = new Upload; t http://php.net/manual/fr/session.upload-progress.php La docu-
switch($sParameter) mentation officielle propos de la progression dun tlcharge-
ment en session,
{
t http://php.net/manual/fr/session.configuration.php La liste des
diffrentes directives de session,
echo $oUpload->progress(); t http://jquery.como-FTJUFPDJFMEFMBMJCSBJSJFK2VFSZ7PVTZUSP-
break; uverez galement une documentation trs riche et en franais.

$oUpload->cancel();
break;
}

Figure 1. Fichier en cours de tlchargement... Figure 2. Barre de progression gnre laide de PHP 5.4 et de jQuery

Conclusion PIERRE-HENRY SORIA


Pierre-Henry Soria travaille dans le dveloppement Web depuis plu-
de session ainsi que les variables de session gnres sieurs annes. Il se spcialise sur laccessibilit, le rfrencement ain-
si que la scurit et les techniques possibles pour viter les intrusions
et les failles de scurit. Il travaille galement sur les parseurs et ana-
lyseurs lexicaux et syntaxiques en langages de bas niveaux. Il peut
servir. tre contact par email : phenrysoria@gmail.com

Dpannage
$_SESSION -

HORS SRI
54 phpsolmag.org/fr