Script upload avec progressbar en php 5.4 et utilisation de session.upload_progress
Dans cet article nous allons traiter le cas d’un upload en php 5.4 et gérer la progressbar via quelques lignes en jquery et le fameux session.upload_progress que php 5.4 nous permet d’utiliser.
Pour bien appréhender cet article, il faut penser à 2 choses:
Vous devez avoir PHP 5.4 minimum d’installé.
Une fois ces petites choses mises au point, partons à l’assaut.
Le script:
Pour le formulaire:
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<a href="session.php">Sessions</a>
<div class="container-fluid">
<form id="upload_form" action="upload.php" method="post" enctype="multipart/form-data" target="resultat">
<input type="hidden" name="<?php echo ini_get('session.upload_progress.name');?>" value="progression" />
<input type="file" name="fichier1" id="file">
<input type="file" name="fichier2" id="file">
<button id="submit-button" class="btn btn-primary" onclick="upload()">Upload</button>
</form>
<div id="progress" class="progress progress-success progress-striped" style="width:700px;">
<div class="bar"></div>
</div>
<iframe id="resultat" name="resultat" style="width:1000px; height:500px;" scrolling="yes"></iframe>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="script.js"></script>
</body>
</html>
Plusieurs précisions à apporter:
<a href="session.php">Sessions</a>
aura un rôle à jouer plus tard.
<input type="hidden" name="<?php echo ini_get('session.upload_progress.name');?>" value="progression" />
est un champ obligatoire pour pouvoir utiliser session.upload_progress (lien vers la doc)
Pour pouvoir utiliser session.upload_progress, l’iframe est obligatoire (c’est la partie crado de cette méthode).
Et les 2 scripts JS (le jquery et le script perso seront utilisés plus tard).
Puisque je suis gentil, je fournis même le CSS, pour avoir une jolie progressbar dès le départ (par contre je n’ai pas trié, faut pas pousser 🙂 ):
.progress {
overflow: hidden;
height: 18px;
margin-bottom: 18px;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.progress .bar {
width: 0%;
height: 18px;
color: #ffffff;
font-size: 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e90d2;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -ms-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: width 0.6s ease;
-moz-transition: width 0.6s ease;
-ms-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
Je propose ça rapidement pour la partie upload:
<?php
foreach($_FILES as $file)
{
$tmp_name = $file['tmp_name'];
$file['name']= explode(".", $file['name']);
$file['name']= $file['name'][0].rand().".".$file['name'][1];
$destination = 'fichiers/'.$file['name'];
move_uploaded_file($tmp_name,$destination);
if($file['error']==UPLOAD_ERR_OK)
{
echo '<br />Up ok <br />';
echo 'Le nom du fichier est : '.$file['name'].'<br />';
echo 'Son type est :'.$file['type'].'<br />';
echo 'Sa taille est de :'.$file['size'].'octets<br />';
echo '<img src="'.$destination.'" width="100" height="100" />';
}
else
{
switch ($file['error'])
{
case 1: // UPLOAD_ERR_INI_SIZE
echo"Le fichier dépasse la limite autorisée par le serveur!";
break;
case 2: // UPLOAD_ERR_FORM_SIZE
echo "Le fichier dépasse la limite autorisée dans le formulaire HTML !";
break;
case 3: // UPLOAD_ERR_PARTIAL
echo "L'envoi du fichier a été interrompu pendant le transfert !";
break;
case 4: // UPLOAD_ERR_NO_FILE
echo "Le fichier que vous avez envoyé a une taille nulle !";
break;
}
}
}
?>
N’utilisez bien sur pas ce code en prod.
La partie
$file['name']= explode(".", $file['name']);
$file['name']= $file['name'][0].rand().".".$file['name'][1];
Permet de renommer tous vos uploads avec le nom de base + un rand(). Ça évite d’écraser les fichiers de même nom lors de vos tests (et donc d’uploader 2 fois le même fichier sur le même form). En prod, renommer le fichier aléatoirement est une bonne solution, et vous pouvez vérifier l’existence des fichiers avec « file_exists » ce qui est bien mieux qu’un explode sur le point 😀 (surtout si vous ne maitrisez pas le « format » des données que vous recevez.
Occupons-nous du progress.php qui s’occupera de faire le calcul de la progression. Donc c’est tout simple:
<?php
session_start();
$key = ini_get('session.upload_progress.prefix').'progression';
if(!empty($_SESSION[$key]))
{
$donnees = $_SESSION[$key];
$bytes_processed = $donnees['bytes_processed'];
$content_length = $donnees['content_length'];
$pourcentage = round($bytes_processed * 100 / $content_length, 2);
}
else
{
$pourcentage = 100;
}
echo $pourcentage;
?>
On récupère nos données sur le fichier en cours d’upload avec le $_SESSION[$key] (consultez la doc au besoin).
$pourcentage = round($bytes_processed * 100 / $content_length, 2);
Permet de récupérer un arrondi de l’avancement du fichier avec 2 chiffres après la virgule.
Soit le fichier est en cours d’upload et on a un pourcentage que l’on doit calculé sinon il est égal à 100. On affiche cette valeur pour pouvoir la récupérer par la suite pour la progressbar 😉
Quand on parle du loup:
function Avancee()
{
$.get('progress.php',function(data)
{
var percentage = data +'%';
$('#progress .bar').html(percentage);
$('#progress .bar').width(percentage);
if(data<100)
{
setTimeout('Avancee()',500);
}
});
}
Donc on réutilise notre $pourcentage de tout à l’heure de progress.php pour afficher l’avancée de la progressbar par la suite.
Et pour finir notre dernière fonction JS:
function upload()
{
$('#progress .bar').html('0%');
$('#progress .bar').width('0%');
$('#upload_form').submit();
setTimeout('Avancee()',1500);
}
Et enfin, le session.php de début de script:
<?php session_start(); echo '<pre>'; print_r($_SESSION); ?>
Vous pouvez désormais tester le script 😉
En cas de problèmes, le session.php peut vous être utile, voici ce qu’il peut retourner:
Array
(
[upload_progress_progression] => Array
(
[start_time] => 1355890400
[content_length] => 428185001
[bytes_processed] => 293964445
[done] =>
[files] => Array
(
[0] => Array
(
[field_name] => fichier1
[name] => machin.flv
[tmp_name] => \tmp\phpVF.tmp
[error] => 0
[done] => 1
[start_time] => 1355890400
[bytes_processed] => 214092265
)
[1] => Array
(
[field_name] => fichier2
[name] => machin.flv
[tmp_name] =>
[error] => 0
[done] =>
[start_time] => 1355890406
[bytes_processed] => 79871757
)
)
)
)
Servez-vous bien de ce tableau (ouvrez session.php uniquement pendant un upload). Si vous testez en local, je vous conseille des fichiers de 200mo minimum (n’oubliez pas de modifier votre php.ini en conséquence).
Le résultat:
Et si on allait plus loin?
Ça vous dirait d’indiquer le taux d’upload?
Continuons alors.
On se crée une page debit.php. On reprend le code de progress:
<?php
session_start();
$key = ini_get('session.upload_progress.prefix').'progression';
if(!empty($_SESSION[$key]))
{
$donnees = $_SESSION[$key];
$depart= $donnees['start_time'];
$maintenant=time();
$delai_up= $maintenant-$depart;
$bytes_processed = $donnees['bytes_processed'];
$totale_taille = $donnees['content_length'];
$avancee=$bytes_processed/$delai_up;
$avancee= round($avancee/1024);
}
else
{
$avancee = 0;
}
echo 'total :'.$totale_taille.' | bytes: '.$bytes_processed.' / delai: '.$delai_up.' => debit: '.$avancee;
?>
On récupère notre débit d’upload tout simplement en divisant la taille actuelle de l’upload avec le délai de l’upload (en secondes). On l’arrondit pour éviter de se taper 15 chiffres après la virgule.
On peut aussi afficher le debit d’upload en JS sur la page d’upload comme pour le pourcentage.
La petite fonction JS qui va bien:
function debit2()
{
$.get('debit.php',function(data)
{
var avancee = data +' ko/sec';
$('.result').html(avancee);
setTimeout('debit2()',1000);
});
}
N’oubliez pas de rajouter dans la fonction upload():
setTimeout('debit2()',1500);
Et pensez à ajouter un div « result » pour afficher ces infos.
Le résultat: 
Trop mignon non? 😀
Pour n’afficher que le débit, ne récupérez que $avancee bien entendu. La ligne a un intérêt uniquement pour le debug 😉
Arrêter l’upload commencé
Vous vous demandez si on peut arreter un upload en cours. La réponse semblerait être oui.
On peut lire dans la doc:
Il est également possible d’annuler le téléchargement courant en définissant la clé $_SESSION[$key][« cancel_upload »] à la valeur TRUE. Lors du téléchargement de plusieurs fichiers dans la même requête, cette action n’annulera que le fichier actuellement en cours de téléchargement, ainsi que ceux en attente de téléchargement mais n’annulera pas les téléchargements terminés avec succès. Lorsqu’un téléchargement est annulé en utilisant cette méthode, la clé error du tableau $_FILES sera définie à UPLOAD_ERR_EXTENSION.
Pour ma part, j’ai testé et pas vraiment concluant le résultat.
Lors de l’upload d’un seul fichier, pas de soucis (à part que la progressbar continue). Par contre, lors de l’upload de 2 fichiers de même taille, impossible d’arrêter l’upload.
Je bloque l’upload avant les 50% du total (donc le 1er fichier n’est pas uploadé complètement) et à la fin du script, l’upload est pourtant uploadé.
Bugs/soucis rencontrés
A part le problème précédent, lors de l’upload d’un fichier de taille NULL, la progressbar bascule à 100% (normal puisqu’on a soumis le form et que le $_SESSION[$key] est vide donc et égal à 100.
Sinon pas d’autres problèmes découverts.
Bon dev à vous 😉
) :
39 réflexions au sujet de « Script upload avec progressbar en php 5.4 et utilisation de session.upload_progress »
Temps approximatif pour la lecture des commentaires : 50 mins-
Belvis Le 3 juillet 2013 à 1 h 28 min
|
-
Toukitouki Le 22 décembre 2013 à 18 h 13 min
|
-
john Le 22 décembre 2013 à 18 h 51 min
|
-
Toukitouki Le 22 décembre 2013 à 19 h 39 min
|
-
john Le 22 décembre 2013 à 19 h 54 min
|
-
Toukitouki Le 22 décembre 2013 à 20 h 06 min
|
-
john Le 22 décembre 2013 à 20 h 08 min
|
-
Toukitouki Le 22 décembre 2013 à 20 h 12 min
|
-
john Le 22 décembre 2013 à 20 h 17 min
|
-
Toukitouki Le 22 décembre 2013 à 20 h 18 min
|
-
john Le 22 décembre 2013 à 20 h 24 min
|
-
Toukitouki Le 22 décembre 2013 à 20 h 02 min
|
-
Lahsini Brahim Le 18 janvier 2015 à 4 h 36 min
|
-
john Le 18 janvier 2015 à 19 h 32 min
|
-
Lahsini Brahim Le 19 janvier 2015 à 2 h 35 min
|
-
john Le 19 janvier 2015 à 19 h 35 min
|
-
Lahsini Brahim Le 19 janvier 2015 à 2 h 43 min
|
-
john Le 19 janvier 2015 à 19 h 36 min
|
-
lahsini brahim Le 20 janvier 2015 à 1 h 30 min
|
-
john Le 20 janvier 2015 à 20 h 10 min
|
-
lahsini brahim Le 21 janvier 2015 à 5 h 19 min
|
-
john Le 21 janvier 2015 à 20 h 12 min
|
-
lahsini brahim Le 21 janvier 2015 à 9 h 02 min
|
-
john Le 21 janvier 2015 à 20 h 19 min
|
-
Jeremy Le 28 janvier 2015 à 20 h 52 min
|
-
john Le 29 janvier 2015 à 16 h 22 min
|
-
Marjan Le 12 février 2015 à 17 h 25 min
|
-
john Le 14 février 2015 à 15 h 10 min
|
-
Marjan Le 12 février 2015 à 21 h 50 min
|
-
john Le 14 février 2015 à 15 h 14 min
|
-
Marjan Le 14 février 2015 à 16 h 08 min
|
-
Marjan Le 14 février 2015 à 16 h 43 min
|
-
john Le 14 février 2015 à 19 h 15 min
|
-
Marjan Le 14 février 2015 à 19 h 58 min
|
-
john Le 14 février 2015 à 20 h 40 min
|
-
Marjan Le 14 février 2015 à 21 h 08 min
|
-
john Le 15 février 2015 à 6 h 17 min
|
-
Alain Gerard Le 13 avril 2017 à 17 h 22 min
|
-
john Le 25 novembre 2020 à 1 h 52 min
|
Merci, pour le tuto, jéssayeria sela
Bonsoir,
Merci pour le tuto !
Serait-il possible cependant de pouvoir récupérer des fichiers de démonstration? Étant novice je pêche à certains endroits et j’aurais souhaité avoir une correction sous la main pour comparer avec mon travail.
Merci beaucoup & bonnes fêtes !
Bonsoir,
Le tuto date un peu donc je n’ai plus les sources. Mais il n’y a qu’à recoller tous les morceaux normalement 😉
Avec quoi avez-vous du mal?
Bonnes fêtes également 😉
Le fait est que j’ai réussi à recréer le script. Lorsque je le teste avec un .jpg, tout semble fonctionner cependant je ne peux tester qu’en local, je vois donc la barre de progression passer de 0 à 100 plus vite qu’un bolide puisque le chargement en local est très rapide. Le fichier finit bien là où je veux jusque là, pas de soucis.
J’ai par contre essayé avec un .iso qui traîne sur mon bureau et qui fait 400Mo: la barre passe à 100% aussi vite que précédemment et mon navigateur semble quand même envoyer le fichier, que je ne trouve par contre pas dans le dossier de destination prévu. J’essaie avec un fichier de 150Mo: idem.
Je pense après réflexion que cela vient du php.ini que vous me rappelez de modifier « je vous conseille des fichiers de 200mo minimum (« n’oubliez pas de modifier votre php.ini en conséquence). »).
Pourriez-vous m’éclairer sur ce sujet svp? Je pense que le problème vient de là puisqu’à aucun moment dans le script on ne vérifie l’ext ou le type de fichier…
Merci infiniment.
Normalement si vous explosez les valeurs du php.ini il devrait il y avoir une erreur. Le fameux:
case 1: // UPLOAD_ERR_INI_SIZE echo"Le fichier dépasse la limite autorisée par le serveur!"; break;Je crois déjà avoir vu ce problème. Êtes-vous certain d’avoir php 5.4 minimum installé?
Sinon pour les réglages du php.ini, il faut modifier le upload_max_filesize et le post_max_size. Indiquez 3G pour être tranquille.
EDIT: j’ai trouvé
« ; Maximum size of POST data that PHP will accept.
; php.net/post-max-size
post_max_size = 8M »
dans php.ini
Du coup c’est fonctionnel?
J’ai modifié la limite pour le post_max_size et pour le upload_max_size et tout est fonctionnel, le % dans la barre n’est pas arrondi (alors qu’on l’a arrondi dans le script il me semble) mais à part ce détail tout marche, je suis aux anges.
Je vous remercie infiniment pour votre aide et votre réactivité, ça fait vraiment plaisir !
Bizarre pour le pourcentage, je vous laisse régler ce petit détail 😉
Content que le reste soit fonctionnel et n’oubliez pas: ne mettez pas ce script en prod’. Si vous devez permettre l’upload à vos visiteurs, renseignez-vous sur les « failles » de l’upload.
De rien 😀
Pour le pourcentage je verrai, c’est pas mal non plus comme c’est.
Pour ce qui est des failles, je compte les combler avec la vérification des ext etc 😀
Ok, je préfère prévenir. Lorsqu’on débute, on ne se rend forcement compte de toutes les failles qu’apporte un formulaire d’upload.
N’hésitez pas à repasser si vous avez des questions.
Je suis sous wamp server avec php 5.4.12, je viens de modifier le php.ini qui était réglé sur 2M. En attendant votre réponse j’ai testé avec un fichier .jpg de 50M, la barre agit de la même façon: elle se complète en moins de 2 sec alors que le chargement des 50M dure 4s. Il y a donc un souci du côté de la progression de la barre.
Mais du coup comme mon php.ini était réglé sur 2M, le test est peut-être faussé. Je viens de le régler sur 100G.
Résultat du test: j’ai une erreur « POST Content-Length of 50000314 bytes exceeds the limit of 8388608 bytes in Unknown on line 0 »
Bonjour,
Merci pour ce tuto, j’ai bien compris l’idée (aucun soucis la dessus), j’ai toute fois quelques questions s’il vous plait ?
Je m’arrache les cheveux car je ne comprend pas dans votre exemple a quoi sert votre iframe ? J’ai pourtant lu le code pendant près de 2h00 pour trouver la réponse mais je ne la trouve pas…
Je sait que « session.upload_progress » doit etre utiliser avec une iframe mais dans ton cas tu met dans ta balise forme « l’iframe en target » et la « cible du formulaire sur upload.php », alors c’est posté dans l’iframe, la cible ou les deux ?
D’ailleurs dans ton iframe tu ne spécifie aucune source « src », alors je ne comprend pas du tout a quoi elle sert car en plus a aucun moment tu ne fait appel a elle (a part dans la cible du formulaire), si tu pouvait éclairer ma lanterne je t’en serais reconnaissant.
J’ai une autre question : Je ne comprend pas pourquoi tu met un setTimeout dans la fonction upload(), c’est pour lancer la fonction avancee() avec une temporisation de 1500 ms ? pour avoir le temps de voir le 0% qui est initialisé en début de fonction ?
Dernière question : le fichier upload.php c’est la page qui contient le formulaire ? (c’est la seule solution que j’ai trouver pour expliquer la balise action de ton formulaire, mais alors dans ce cas a quoi sert l’iframe ?), bon après tu préviens que ton code n’est pas propre donc c’est peut-être juste ça…
Merci pour le tuto en tout cas, grâce a toi j’ai bien compris le principe, c’est même le tuto le plus claire que j’ai trouver jusqu’ici, dommage que ton code ne soit pas plus propre et claire, j’espère que tu trouvera le temps de le faire plus propre et claire et ce sera nikel 😉
Merci encore
Cordialement
Bonjour,
Ça en fait des questions, je vais essayer de ne rien oublier (puis le tuto est vieux, il a quand même plus de 2 ans). Et à ma décharge, j’ai codé ce truc en speed 😀
Alors pour l’iframe, il existe l’attribut « target » dans le tag « form ».
Donc comme tu peux t’en douter ça va être le framename qui nous intéresse.
ou même en plus précis
Donc le traitement de l’upload est renvoyé sur l’iframe. Voilà pour cette question 🙂
Oui bon j’avoue je ne sais pas pourquoi j’appelle Avancee() deux fois 😀 #petitFail
Je pense que ma 1ere réponse répond à ta dernière question 😉
Content que ce tuto a pu t’être utile 😉
Cordialement
Bonjour,
Tout d’abord merci pour ta réponse rapide.
Effectivement tu viens de m’apprendre quelque chose (encore) visiblement d’après le petit paragraphe explicatif en anglais, cela permet d’avoir un retour de réponse dans l’iframe avec comme cible le upload.php dont le résultat sortira dans l’iframe sans qu’il y est un rechargement de page pour l’internaute (c’est la que ca bloquait pour moi parce que je me disait que si il y a rechargement de page la fonction js ne peux plus se déclencher car elle se déclenche sur le bouton submit….je comprend maintenant.)
Sinon pour tes fonctions jquery effectivement mais c’est pas grave comme tu l’expliquait le tuto portait uniquement sur session.upload_progress et cela m’a été largement suffisant pour comprendre, désolé de t’avoir embeté avec le reste 🙂
Je doit effectivement faire un script d’upload mais je désire en faire un bien qui n’utilise pas jquery, mais comme avec ton tuto c’est ok je vais en fair un super bien graçe a toi.
Merci encore et continue comme ça 😉
a bientot
Bonsoir,
Hé oui j’avais prévenu, dégueulasse la technique avec l’iframe 😀
Pas de jquery? Comment ça? Tu veux dire JS pur ou genre 1 autre librarie/framework JS (angular ou autre)?
Honnêtement, je suis très très très (je pense qu’il a assez de très) back, j’ai vraiment du mal à « kiffer » le JS même si je me soigne mais recoder en JS pur après avoir toucher jquery… C’est un truc à se tirer 1 balle 😆
Bonne chance pour ton script et merci à toi d’être passé 😉
MDR ! tu habite a 500 mètres de chez moi… 😉
La prochaine fois que tu as une question ouvre la fenêtre et crie ça sera plus simple 😀
technologie : 0
fenêtre : 1
Mdr 😉 Ou bien on peut relier deux gobelets en plastique avec du fil :=D
Sinon je suis en train de bosser sur un nouveau script d’upload je te le montrerais quant je l’aurais terminer, il sera en ajax/javascript/php uniquement je ne veux pas de jquery, bon pour l’instant je bloque car je bosse sur easyphp et la fonction move_uploaded_file semble avoir un probleme…
mais j’y travaille et je te montre ça des que je l’aurais fini 😉
a bientôt l’ami
C’est vrai que j’ai oublié la base, honte à moi 😀
Ah oui t’es en mode warrior, pas de jquery, pas de framework php. Tout à la main, à l’ancienne.
Impatient de voir ça, tu comptes en faire 1 github?
A bientôt 😉
Bonjour a toi,
Oui je préfère faire mes codes moi même au moins je suis sur de leurs efficacités et je peux les faire a ma manière, mais bon pour l’instant c’est un peu compliqué car sous easyphp move_uploaded_file semble ne pas fonctionner correctement, ca marche avec une image mais avec une vidéo il semble ne pas crée le $_FILES[‘tmp_name’], alors je l’ai mis sur un serveur de dévellopement sur le net et la ça fonctionne mais je n’ai pas le contrôle du php.ini et en plus le session.upload_progress n’est pas activé sur le serveur donc j’ai galérer.
Par ailleur j’ai un autre bug bizard en javascript, une fois que je soumet mon formulaire graçe a JavaScript avec document.upload_form.submit(); tout le code js se trouvant après n’est pas éxécuté….comme si la page était quelques part reseté
En plus je vais devoir coupler tout ça avec FFMPEG, je vais donc attendre de prendre mon serveur dédié.
Je continue toutefois de m’acharner, c’est dommage j’y etais presque 🙁 mais il me faut un dédié…
Non je ne vais pas en faire un ghit mais je pense qu’il serait sympa de me faire un petit site ou je peux mettre mes scripts pour la communauté 🙂 comme toi
Voila
a bientot
Bonsoir,
J’étais comme toi à vrai dire puis j’ai découvert les frameworks et ça fait vraiment gagner du temps. Ça évite aussi de refaire toujours les mêmes trucs qui à la longue deviennent chiants, pareil pour la sécu, le MVC déjà en place etc…
Je vois que t’as encore du boulot donc je te souhaite bon courage. Et si tu souhaites poster un article sur le blog, ça peut se faire ou pourquoi pas ta version de cet article 😉
Re a toi l’ami, bon j’ai finalement installer la dernière version de easyphp et je l’ai configuré comme il faut, j’ai pu faire un script qui semble bien marcher mais bon c’est pas encore ça je trouve… Tiens je t’ai fait une vidéo pour que tu puisse voir ce que ca donne https://www.youtube.com/watch?v=yEIYZxEjJVs ça marche mais il y a visiblement un truc qui ne va pas, c’est lent et parfois ça plante le navigateur, bon bha au moins ca avance, il faut que je l’améliore maintenant.
a bientot
Sympa le petit rendu 😉
Alors j’ai eu le même problème que toi avec le même environnement (easyphp). J’avais mon firefox qui freezait mais je n’ai pas eu ce soucis en prod’ (enfin je crois pas à me rappeler). Peut-être essayer wamp 😀
Il ne reste plus qu’à designer tout ça et c’est parti 😉
Bonjour,
Je pense avoir mal compris la partie du fichier .JS
En effet la barre passe de 0 a 100%,
Voici mon fichier JS:
function upload()
{
$(‘#progress .bar’).html(‘0%’);
$(‘#progress .bar’).width(‘0%’);
$(‘#upload_form’).submit();
setTimeout(‘Avancee()’,1500);
}
function Avancee()
{
$.get(‘progress.php’,function(data)
{
var percentage = data +’%’;
$(‘#progress .bar’).html(percentage);
$(‘#progress .bar’).width(percentage);
if(data<100)
{
setTimeout('Avancee()',500);
}
});
}
Cela est il correcte ?
Bonjour,
Je ne vois pas de différence avec le code que j’ai donné si?
Si ça passe de 0 à 100% c’est que l’upload est terminé. Ou alors ça vient de votre version de php < 5.4. Ou tous les éléments n'ont pas été tous reliés comme il faut. Enfin c'est dur de répondre sans plus d'infos 😉
Bonjour,
C’est la grosse galère !……
Je commence à bien maîtriser PHP, mais j’ai encore pas mal de lacunes avec JS.
J’essaye depuis des mois à comprendre les barres de progression, sans arriver à les faire fonctionner.
En suivant à la lettre le tutoriel, ma barre fonctionne bizarrement.
1°) elle met un certain temps à démarrer.
2°) elle passe de zéro à 100 à la vitesse du son.
3°) Elle est à 100, alors que le fichier est en cours de chargement.
4°) le fichier session.php m’indique toujours un array vide.
5°) le fichier s’upload normalement, et va bien se stocker au bon endroit
mon hébergeur est en PHP 5.5
bref : je n’arrive pas à comprendre.
J’ai un fichier formulaire : essaibarre.php
un fichier upload : upload.php
un fichier progress : progress.php
un fichier session : session.php
un fichier css : barre.css
mon fichier essaibarre.php ——> est-ce celui-là qui pose problème ?
<?php session_start(); ?> <html> <head> <link rel="stylesheet" href= "barre.css" /> </head> <body> <a href="session.php">Sessions</a> <div class="container-fluid"> <form id="upload_form" action="upload.php" method="post" enctype="multipart/form-data" target="resultat"> <input type="hidden" name="<?php echo ini_get('session.upload_progress.name');?>" value="progression" /> <input type="file" name="fichier1" id="file"> <input type="file" name="fichier2" id="file"> <button id="submit-button" class="btn btn-primary" onclick="upload()">Upload</button> </form> <div id="progress" class="progress progress-success progress-striped" style="width:700px;"> <div class="bar"></div> </div> <iframe id="resultat" name="resultat" style="width:1000px; height:500px;" scrolling="yes"></iframe> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="script.js"></script> <script> function upload() { $('#progress .bar').html('0%'); $('#progress .bar').width('0%'); $('#upload_form').submit(); setTimeout('Avancee()',1500); } function Avancee() { $.get('progress.php',function(data) { var percentage = data +'%'; $('#progress .bar').html(percentage); $('#progress .bar').width(percentage); if(data<100) { setTimeout('Avancee()',500); } }); } </script> </body> </html>Bonjour,
Si votre session est vide, il faudrait vérifier si session.upload_progress est activé tout simplement 😉
Accessoirement, pouvez-vous m’expliquer le déclenchement de progress.php
C’est là je pense que tout se joue, et je ne cpmprends pas bien.
merci par avance de votre aide.
En gros, progress.php recupere le % en cours de l’upload :
if(!empty($_SESSION[$key])) { $donnees = $_SESSION[$key]; $bytes_processed = $donnees['bytes_processed']; $content_length = $donnees['content_length']; $pourcentage = round($bytes_processed * 100 / $content_length, 2); } else { $pourcentage = 100; }D’où l’importance de la session sinon progress.php retourne 100
Et progress.php est appelé en ajax via :
function Avancee() { $.get('progress.php',function(data) { var percentage = data +'%'; $('#progress .bar').html(percentage); $('#progress .bar').width(percentage); if(data<100) { setTimeout('Avancee()',500); } }); }Merci de votre réponse.
Je vérifie dans mon phpinfo et à priori, je pense que session.upload_progress est activée. Voici mon phponfo :
session.upload_progress.cleanup On On
session.upload_progress.enabled On On
session.upload_progress.freq 1% 1%
session.upload_progress.min_freq 1 1
session.upload_progress.name PHP_SESSION_UPLOAD_PROGRESS PHP_SESSION_UPLOAD_PROGRESS
session.upload_progress.prefix upload_progress_ upload_progress_
session.use_cookies On On
session.use_only_cookies Off Off
session.use_strict_mode Off Off
session.use_trans_sid 0 0
mon array session.php est désespérément vide !…..
Et pas d’erreur php (même des notices)?
non, aucune erreur.
les notices, c’est quoi ??
Genre
Notice: Undefined indexJe ne vois pas alors. Je ferais à l’occaz un repos bitbucket avec tous les scripts du blog (plus propres aussi). Mais ça sera dans un petit moment, je suis sur un projet.
Si « Toukitouki » et « Lahsini Brahim » y sont arrivés, je pense que c’est faisable 😉
Merci pour ton aide.
Bon repos.
Désolé de n’avoir pas été plus utile. Je vais essayer courant la semaine pro, de push 1 repos en ligne pour ce script.
Si tu trouves avant, n’hésite pas à me le signaler 😉
Bonne chance.
Bonjour,
Je découvre ce script, et au 1er test sur mon serveur : bingo ! ça marche impec.
Grand merci, je ne connaissais pas session.upload_progress
Avec plaisir Alain 🙂