SlideShare une entreprise Scribd logo
phpsolmag.org/fr46
POUR LES DÉBUTANTS
HORS SÉRI
A
snippet Perl ou installer l’extension PECL « uploadpro-
-
-
-
sentées dans le Tableau 1
session.upload_progress.freq et session.
upload_progress.min_freq
-
nul.
.
session.upload_progress.name
<input type=”hidden” name=”<?php echo ini_get(‘session.
upload_progress.name’);?>”
value=”NON_DE_VOTRE_SESSION” />
-
-
Créer une barre
de progression grâce
à PHP 5.4
La version de PHP 5.4 vient avec son lot de nouveautés et propose
désormais de suivre la progression d’un fichier en cours de
téléchargement grâce aux nouvelles directives et variables de session.
Dans cet article, nous allons donc apprendre à exploiter au mieux ces
nouvelles fonctionnalités. Nous allons également construire une micro-
applicationWeb pour le téléchargement et l’affichage d’images.
Cet article explique : Ce qu’il faut savoir :
-
centes le supporte).
Barre de progression
phpsolmag.org/fr 47HORS SÉRI
$_
SESSION[$sSessionKey][‘cancel_upload’] à la valeur TRUE.
-
-
. $_POST[ini_get(‘session.upload_progress.name’)]);
var_dump($_SESSION[$sSessionKey]);
-
fert.
Tableau 1. Nouvelles directives de session permettant de traquer la progression d’un fichier
Nom de la directive Description Valeur par défaut
session.upload _ progress.enabled
la variable super-global $ _ SESSION
On
session.upload _ progress.cleanup
téléchargement est terminé).
On
du téléchargement dans la variable super-global
$ _ SESSION
upload_progress_
session.upload _ progress.name
session.upload _ progress.freq 1%
session.upload _ progress.min _ freq 1
Listing 1. Données de progression stockées en session
<?php
$_SESSION[“upload_progress_NON_DE_VOTRE_SESSION”] = array(
“start_time” => 1234567890, // L’heure de la requête
“content_length” => 57343257, // Longueur du contenu POST
“bytes_processed” => 453489, // Quantité d’octets reçus et traités
“done” => false, // TRUE lorsque le gestionnaire POST a terminé avec succès, sinon FALSE
0 => array(
“name” => “image.png”,
“tmp_name” => “/tmp/phpHYOAod”,
“error” => 0,
“start_time” => 1234567890, // L’heure de début de requête
),
)
);
phpsolmag.org/fr48
POUR LES DÉBUTANTS
HORS SÉRI
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>
Barre de progression
phpsolmag.org/fr 49HORS SÉRI
error du tableau $_FILES -
nie à .
Utiliser AJAX pour une progression
en temps réel
-
le serveurs.
ainsi que l’attribut multiple (disponible depuis HTML5)
addFile()
for. Voir Listing 4.
accept
image/* -
-
-
bilité hidden pour qu’elle ne soit pas visible par défaut.
Par la suite, nous allons la rendre visible pendant le
de la page.
<form action=”upload.php?show_transfer=on”
method=”post” id=”upload_form”
enctype=”multipart/form-data” target=”result_frame”>
-
-
$_SESSION et
$_FILES
-
upload()
progress()
-
cancel() -
fadeOut()
faire disparaitre la barre de progression.
progress()
upload()
show()
resetProgressBar() est utili-
sée par upload() et cancel() pour réinitialiser la barre de
progression à 0%
oMe faisant ap-
pel à la variable this
</div>
<script>
$(‘#upload’).click(function() {
(new UploadBar).upload();
});
$(‘#cancel’).click(function() {
(new UploadBar).cancel();
});
</script>
</html>
phpsolmag.org/fr50
POUR LES DÉBUTANTS
HORS SÉRI
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’];
Barre de progression
phpsolmag.org/fr 51HORS SÉRI
$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
{
phpsolmag.org/fr52
POUR LES DÉBUTANTS
HORS SÉRI
}
}
}
}
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;
}
}
Barre de progression
phpsolmag.org/fr 53HORS SÉRI
Listing 5. Classe UploadBar.class.js pour récupérer 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%’);
};
}
phpsolmag.org/fr54
POUR LES DÉBUTANTS
HORS SÉRI
-
Listing 6. Fichier download_progress.ajax.php
<?php
require_once ‘Upload.class.php’;
$sParameter = (!empty($_POST[‘param’])) ? strip_
$oUpload = new Upload;
switch($sParameter)
{
echo $oUpload->progress();
break;
$oUpload->cancel();
break;
}
Figure 1. Fichier en cours de téléchargement...
Conclusion
de session ainsi que les variables de session générées
servir.
http://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar – La
totalité du code source abordée dans cet article,
http://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar/blob/
master/static/css/common.css
http://php.net/manual/fr/session.upload-progress.php – La docu-
mentation officielle à propos de la progression d’un télécharge-
ment en session,
http://php.net/manual/fr/session.configuration.php – La liste des
différentes directives de session,
http://jquery.com -
uverez également une documentation très riche et en français.
Figure2.Barredeprogressiongénéréeàl’aidedePHP5.4etdejQuery
PIERRE-HENRY SORIA
Pierre-Henry Soria travaille dans le développement Web depuis plu-
sieurs années. Il se spécialise sur l’accessibilité, le référencement ain-
si que la sécurité et les techniques possibles pour éviter les intrusions
et les failles de sécurité. Il travaille également sur les parseurs et ana-
lyseurs lexicaux et syntaxiques en langages de bas niveaux. Il peut
être contacté par email à : phenrysoria@gmail.com
Dépannage
$_SESSION -
-

Contenu connexe

Tendances

Tuto atelier securisation_site_web
Tuto atelier securisation_site_webTuto atelier securisation_site_web
Tuto atelier securisation_site_web
sahar dridi
 
Trucs et astuces pour rendre votre application Windows Phone 8 plus visible
Trucs et astuces pour rendre votre application Windows Phone 8 plus visibleTrucs et astuces pour rendre votre application Windows Phone 8 plus visible
Trucs et astuces pour rendre votre application Windows Phone 8 plus visible
Microsoft
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à SinatraRémi Prévost
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Ghilas BELHADJ
 
PHP 7 et Symfony 3
PHP 7 et Symfony 3PHP 7 et Symfony 3
PHP 7 et Symfony 3
Eddy RICHARD
 
Authentification sociale en angular 1.pptx
Authentification sociale en angular 1.pptxAuthentification sociale en angular 1.pptx
Authentification sociale en angular 1.pptx
Mickael ROLO
 
10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !
Boiteaweb
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
Raphaël Semeteys
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
Persona: un système d'identité pour le Web
Persona: un système d'identité pour le WebPersona: un système d'identité pour le Web
Persona: un système d'identité pour le Web
Francois Marier
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
Mickael Perraud
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
Chi Nacim
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Faiz Morchid
 
Epitech securite-2012.key
Epitech securite-2012.keyEpitech securite-2012.key
Epitech securite-2012.key
Damien Seguy
 
La sécurite pour les developpeurs - OWF
La sécurite pour les developpeurs - OWFLa sécurite pour les developpeurs - OWF
La sécurite pour les developpeurs - OWF
Christophe Villeneuve
 
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Boiteaweb
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMSChi Nacim
 
jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesRémi Prévost
 

Tendances (20)

Tuto atelier securisation_site_web
Tuto atelier securisation_site_webTuto atelier securisation_site_web
Tuto atelier securisation_site_web
 
Trucs et astuces pour rendre votre application Windows Phone 8 plus visible
Trucs et astuces pour rendre votre application Windows Phone 8 plus visibleTrucs et astuces pour rendre votre application Windows Phone 8 plus visible
Trucs et astuces pour rendre votre application Windows Phone 8 plus visible
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
PHP 7 et Symfony 3
PHP 7 et Symfony 3PHP 7 et Symfony 3
PHP 7 et Symfony 3
 
Authentification sociale en angular 1.pptx
Authentification sociale en angular 1.pptxAuthentification sociale en angular 1.pptx
Authentification sociale en angular 1.pptx
 
10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !10 façons de casser son site WordPress ... et de le réparer !
10 façons de casser son site WordPress ... et de le réparer !
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Playing With PHP 5.3
Playing With PHP 5.3Playing With PHP 5.3
Playing With PHP 5.3
 
Persona: un système d'identité pour le Web
Persona: un système d'identité pour le WebPersona: un système d'identité pour le Web
Persona: un système d'identité pour le Web
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
 
Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0Creation de template_joomla_2.5_-_v_1.0
Creation de template_joomla_2.5_-_v_1.0
 
Epitech securite-2012.key
Epitech securite-2012.keyEpitech securite-2012.key
Epitech securite-2012.key
 
La sécurite pour les developpeurs - OWF
La sécurite pour les developpeurs - OWFLa sécurite pour les developpeurs - OWF
La sécurite pour les developpeurs - OWF
 
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
jQuery — fonctionnalités avancées
jQuery — fonctionnalités avancéesjQuery — fonctionnalités avancées
jQuery — fonctionnalités avancées
 

Similaire à Créer une barre de progression grâce à PHP 5.4

Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
IZZA Samir
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Abdoulaye Dieng
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
VincentBweka
 
Des tests modernes pour Drupal
Des tests modernes pour DrupalDes tests modernes pour Drupal
Des tests modernes pour Drupal
Christophe Villeneuve
 
Php 7.4 2020-01-28 - afup
Php 7.4   2020-01-28 - afupPhp 7.4   2020-01-28 - afup
Php 7.4 2020-01-28 - afup
Julien Vinber
 
Meet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaireMeet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaire
Julien Vinber
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentation
julien pauli
 
PHP 5.3, PHP Next
PHP 5.3, PHP NextPHP 5.3, PHP Next
PHP 5.3, PHP Next
SQLI
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
11. Autorisations.pptx
11. Autorisations.pptx11. Autorisations.pptx
11. Autorisations.pptx
ZinebJbilou
 
Drupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter DrupalDrupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter Drupal
Artusamak
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
Hugo Hamon
 
Html5 2
Html5 2Html5 2
Html5 2
TECOS
 
Migration PHP4-PHP5
Migration PHP4-PHP5Migration PHP4-PHP5
Migration PHP4-PHP5
julien pauli
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
Julio Djomo
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
borhen boukthir
 
Mpdf 11
Mpdf 11Mpdf 11
Mpdf 11
Moez Moezm
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
5pidou
 
Tester les applications Zend Framework
Tester les applications Zend FrameworkTester les applications Zend Framework
Tester les applications Zend FrameworkMickael Perraud
 
WP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeurWP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeur
benjamingossetpro
 

Similaire à Créer une barre de progression grâce à PHP 5.4 (20)

Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
 
Des tests modernes pour Drupal
Des tests modernes pour DrupalDes tests modernes pour Drupal
Des tests modernes pour Drupal
 
Php 7.4 2020-01-28 - afup
Php 7.4   2020-01-28 - afupPhp 7.4   2020-01-28 - afup
Php 7.4 2020-01-28 - afup
 
Meet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaireMeet up symfony 11 octobre 2016 - Les formulaire
Meet up symfony 11 octobre 2016 - Les formulaire
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentation
 
PHP 5.3, PHP Next
PHP 5.3, PHP NextPHP 5.3, PHP Next
PHP 5.3, PHP Next
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
11. Autorisations.pptx
11. Autorisations.pptx11. Autorisations.pptx
11. Autorisations.pptx
 
Drupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter DrupalDrupalcamp Nantes - Adapter Drupal
Drupalcamp Nantes - Adapter Drupal
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
 
Html5 2
Html5 2Html5 2
Html5 2
 
Migration PHP4-PHP5
Migration PHP4-PHP5Migration PHP4-PHP5
Migration PHP4-PHP5
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
 
Mpdf 11
Mpdf 11Mpdf 11
Mpdf 11
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
Tester les applications Zend Framework
Tester les applications Zend FrameworkTester les applications Zend Framework
Tester les applications Zend Framework
 
WP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeurWP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeur
 

Créer une barre de progression grâce à PHP 5.4

  • 1. phpsolmag.org/fr46 POUR LES DÉBUTANTS HORS SÉRI A snippet Perl ou installer l’extension PECL « uploadpro- - - - sentées dans le Tableau 1 session.upload_progress.freq et session. upload_progress.min_freq - nul. . session.upload_progress.name <input type=”hidden” name=”<?php echo ini_get(‘session. upload_progress.name’);?>” value=”NON_DE_VOTRE_SESSION” /> - - Créer une barre de progression grâce à PHP 5.4 La version de PHP 5.4 vient avec son lot de nouveautés et propose désormais de suivre la progression d’un fichier en cours de téléchargement grâce aux nouvelles directives et variables de session. Dans cet article, nous allons donc apprendre à exploiter au mieux ces nouvelles fonctionnalités. Nous allons également construire une micro- applicationWeb pour le téléchargement et l’affichage d’images. Cet article explique : Ce qu’il faut savoir : - centes le supporte).
  • 2. Barre de progression phpsolmag.org/fr 47HORS SÉRI $_ SESSION[$sSessionKey][‘cancel_upload’] à la valeur TRUE. - - . $_POST[ini_get(‘session.upload_progress.name’)]); var_dump($_SESSION[$sSessionKey]); - fert. Tableau 1. Nouvelles directives de session permettant de traquer la progression d’un fichier Nom de la directive Description Valeur par défaut session.upload _ progress.enabled la variable super-global $ _ SESSION On session.upload _ progress.cleanup téléchargement est terminé). On du téléchargement dans la variable super-global $ _ SESSION upload_progress_ session.upload _ progress.name session.upload _ progress.freq 1% session.upload _ progress.min _ freq 1 Listing 1. Données de progression stockées en session <?php $_SESSION[“upload_progress_NON_DE_VOTRE_SESSION”] = array( “start_time” => 1234567890, // L’heure de la requête “content_length” => 57343257, // Longueur du contenu POST “bytes_processed” => 453489, // Quantité d’octets reçus et traités “done” => false, // TRUE lorsque le gestionnaire POST a terminé avec succès, sinon FALSE 0 => array( “name” => “image.png”, “tmp_name” => “/tmp/phpHYOAod”, “error” => 0, “start_time” => 1234567890, // L’heure de début de requête ), ) );
  • 3. phpsolmag.org/fr48 POUR LES DÉBUTANTS HORS SÉRI 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>
  • 4. Barre de progression phpsolmag.org/fr 49HORS SÉRI error du tableau $_FILES - nie à . Utiliser AJAX pour une progression en temps réel - le serveurs. ainsi que l’attribut multiple (disponible depuis HTML5) addFile() for. Voir Listing 4. accept image/* - - - bilité hidden pour qu’elle ne soit pas visible par défaut. Par la suite, nous allons la rendre visible pendant le de la page. <form action=”upload.php?show_transfer=on” method=”post” id=”upload_form” enctype=”multipart/form-data” target=”result_frame”> - - $_SESSION et $_FILES - upload() progress() - cancel() - fadeOut() faire disparaitre la barre de progression. progress() upload() show() resetProgressBar() est utili- sée par upload() et cancel() pour réinitialiser la barre de progression à 0% oMe faisant ap- pel à la variable this </div> <script> $(‘#upload’).click(function() { (new UploadBar).upload(); }); $(‘#cancel’).click(function() { (new UploadBar).cancel(); }); </script> </html>
  • 5. phpsolmag.org/fr50 POUR LES DÉBUTANTS HORS SÉRI 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’];
  • 6. Barre de progression phpsolmag.org/fr 51HORS SÉRI $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 {
  • 7. phpsolmag.org/fr52 POUR LES DÉBUTANTS HORS SÉRI } } } } 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; } }
  • 8. Barre de progression phpsolmag.org/fr 53HORS SÉRI Listing 5. Classe UploadBar.class.js pour récupérer 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%’); }; }
  • 9. phpsolmag.org/fr54 POUR LES DÉBUTANTS HORS SÉRI - Listing 6. Fichier download_progress.ajax.php <?php require_once ‘Upload.class.php’; $sParameter = (!empty($_POST[‘param’])) ? strip_ $oUpload = new Upload; switch($sParameter) { echo $oUpload->progress(); break; $oUpload->cancel(); break; } Figure 1. Fichier en cours de téléchargement... Conclusion de session ainsi que les variables de session générées servir. http://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar – La totalité du code source abordée dans cet article, http://github.com/pH-7/PHP5.4-Session-Upload-Progress-Bar/blob/ master/static/css/common.css http://php.net/manual/fr/session.upload-progress.php – La docu- mentation officielle à propos de la progression d’un télécharge- ment en session, http://php.net/manual/fr/session.configuration.php – La liste des différentes directives de session, http://jquery.com - uverez également une documentation très riche et en français. Figure2.Barredeprogressiongénéréeàl’aidedePHP5.4etdejQuery PIERRE-HENRY SORIA Pierre-Henry Soria travaille dans le développement Web depuis plu- sieurs années. Il se spécialise sur l’accessibilité, le référencement ain- si que la sécurité et les techniques possibles pour éviter les intrusions et les failles de sécurité. Il travaille également sur les parseurs et ana- lyseurs lexicaux et syntaxiques en langages de bas niveaux. Il peut être contacté par email à : phenrysoria@gmail.com Dépannage $_SESSION - -