Ajout d une barre de progression sur l upload des images
Résoluflexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention -
a tous j ai un fichier d upload d image
mais j aurais souhaiter savoir comment venir y intégrer une barre de progression
voici mon fichier
merci
<?php
session_start();
$dossier = 'uploads/';
$fichier = basename($_FILES['file']['name']);
$taille_maxi = 5000000;
$taille = filesize($_FILES['file']['tmp_name']);
$extensions = array('.png', '.PNG', '.gif', '.jpg', '.JPG', '.jpeg', '.JPEG');
$extension = strrchr($_FILES['file']['name'], '.');
//Début des vérifications de sécurité...
if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
{
$erreur = 'Vous devez uploader un fichier de type png, gif, jpg, jpeg, txt ou doc...';
}
if($taille>$taille_maxi)
{
$erreur = 'Le fichier est trop gros...';
}
if(file_exists("uploads/" . $_FILES["file"]["name"])){
$erreur = ' L\'image existe déjà.';
}
if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
{
//On formate le nom du fichier ici...
$fichier = strtr($fichier,
'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ',
'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
$fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
if(move_uploaded_file($_FILES['file']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné..
{
echo ' <span style="margin-left:30%;"> <br /> Upload effectué avec succès ! </span>';
include('mabd.php');
$req =$bdd->prepare('INSERT INTO galerie_images ( nom_img, nom_min) VALUES ( :nom_img, :nom_min)');
$req->execute(array(
'nom_img' => $_FILES["file"]["name"],
'nom_min' => $_FILES["file"]["name"]
));
}
else //Sinon (la fonction renvoie FALSE).
{
echo 'Echec de l\'upload !';
}
}
else
{
echo $erreur;
}
?>
- Php ajax file upload with progress bar
- .Bin file - Guide
- .Dat file - Guide
- File ///sdcard/ - Télécharger - Gestion de fichiers
- Host file - Guide
- Expert php - Télécharger - Langages
109 réponses
- 1
- 2
- 3
- 4
- 5
- 6
La question porte sur l'ajout d'une barre de progression lors de l'upload d'une image en PHP, en utilisant FormData et XMLHttpRequest pour afficher l'état d'avancement. Des vérifications côté serveur couvrent l'extension autorisée, la taille maximale et l'existence du fichier, afin d'assurer la sécurité et la stabilité du traitement. Le code client prépare le fichier et transmet les données via FormData, ce qui améliore l'expérience utilisateur grâce à l'observation des événements. En cas d'évolution, l'approche privilégie un script AJAX affichant la progression et renvoyant une réponse JSON côté serveur pour mettre à jour l'interface sans recharger la page.
voila je pense avoir trouve quelque chose
mais le soucis que je rencontre c est que le fichier s'upload tout seul des qu il a été choisi
sans que je lui demande
y a t il moyen de modifier le code de tel façon a c que le fichier soit uploader grâce a submit
merci de l aide
<input type="submit" name="submit" value="Upload">
voici le code actuel
<h2>HTML5 File Upload Progress Bar Tutorial</h2> <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="file1" id="file1" onchange="uploadFile()"><br> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form>
et le javascript
function _(el) {
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
//use file_upload_parser.php from above url
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
lorsque je choisi l image j utilise ce code
<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="fileUpload">Fichier:</label> <input type="file" name="photo" id="fileUpload"> <input type="submit" name="submit" value="Upload"> <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p> <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p> </div> </form>
et je viens de trouver ce morceau de code que j essaye d appliquer mais cela ne fonctionne pas
<form action="a.php" method="post" enctype="multipart/form-data">
<input type="file" id="fileSQL" name="fileSQL" required />
<input type="submit" value="Upload" onclick="display_loader()"/>
</form>
function display_loader()
{
document.getElementById('loader').innerHTML = "<img src='loader.gif' alt='load'/><br/>Loading, please wait ...";}
j ai donc modifier mon fichier html
<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="fileUpload">Fichier:</label> <input type="file" name="photo" id="fileUpload"> <input type="submit" name="submit" value="Upload" onclick="display_loader()"/> <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p> <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p> </div> </form>
Tu ne peux pas le faire sans faire de l'Ajax.
Car avec un submit normal, ça envoie les données en même temps que ça recharge ou change de page...
Le premier code que tu avais trouvé utilise l'Ajax et c'est la seule façon de faire si tu veux disposer d'une barre de progression ou d'un loader lors de l'envoi des données.
merci pour la réponse
donc même avoir un simple message en javascript cela ne fonctionnera pas ?
car une fois mon image uploader , je me dirige vers un autre fichier qui affiche l image téléchargée
donc du coup n y a t il pas moyen d afficher un message une fois que l on clic sur l upload et qui disparaît une fois que j arrive sur l autre page
en s assurant bien évidement qu il y a bien une image a télécharger
car lorsque je regarde ce code .. une barre de progression agit bien durant l upload
https://codepen.io/PerfectIsShit/pen/zogMXP
j ai trouve ceci aussi
https://codes-sources.commentcamarche.net/forum/affich-619989-comment-afficher-un-message-d-attente-pendant-un-upload
oui j ai aussi essayer de l appliquer a mon formulaire
car a la longue de chercher
j ai compris ce que je devais faire pour faire declencher le script de javascript
j ai donc fait ceci
<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="fileUpload">Fichier:</label> <input type="file" name="photo" id="fileUpload"> <input type="submit" name="submit" value="Upload" onclick="uploadFile()"/> <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p> <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p> </div> </form>
en changeant bien sur file1 en file
mais rien ne se passe
Tu l'as adapté pour cibler le bon fichier php qui fera l'upload ?
As-tu vérifié dans la console de ton navigateur si il n'y avait pas des messages d'erreur ?
Comprends-tu un minimum le fonctionnement du code JavaScript que tu as trouvé ?.... Ça serait déjà un bon début histoire de savoir ce que tu utilises comme code et ainsi être capable de le debuger si besoin..
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionj ai donc mis ce code car c est celui qui me parle le plus
function _(el) {
return document.getElementById(el);
}
function uploadFile(){
var file = _("file").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
//use file_upload_parser.php from above url
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
et donc en fait il faut que j adapte ce code sur la page qui demande a l utilisateur d uploader une image avec le form
car dans l exemple que j ai trouve cela ce passe ainsi
https://codepen.io/PerfectIsShit/pen/zogMXP
ensuite j ai donc pris mon form pour le modifier de cette façon
<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="fileUpload">Fichier:</label>
<input type="file" name="photo" id="upload_form" required>
<input type="submit" name="submit" value="Upload" onclick="uploadFile()"/>
<p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
<p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
</div>
</div>
</form>
pour ce qui est de ce que fait le code ajax
il appelle deux fonctions d après ce que je comprends
et il affiche une barre de progression et l avancée du ficher envoyé
dans ma console aucune erreur


Ensuite, tu exécutes le code .. et tu "déplies" la ligne "post" et tu regardes ce qui s'affiche dans l'onglet reponse ainsi que dans l'onglet requête
Tu nous en fais des captures écran et tu nous les mets dans la discussion...
Une fois que ça sera fait, dans la console tu devrais voir les lignes de requêtes"post" lorsque tu upload tes images.
Tant que tu n'as pas ces lignes.. c'est que le debug xhr n'est pas activé.
Si tu n'arrives pas à l'activer... je t'invite à poster une question dans le forum "internet" .. vu que ça concerne le fonctionnement du navigateur internet et non la programmation à proprement parler.
merci pour le temps consacré
voila je pense avoir bien corrige j ai mis l ID sur file
j ai une erreur en moins
la suivante apparemment c est sur cette ligne
ajax.addEventListener("abort", abortHandler, false);
qui apparemment correspond a cette ligne
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
je suppose que cela indique que l upload a échoué

voila j ai tout remis en état ....
donc voila mon code modifie de form
mais toujours les mêmes erreurs
pourtant j ai mis file partout ...
<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="file">Fichier:</label>
<input type="file" name="photo" id="file">
<input type="submit" name="file" id="file" value="Upload" onclick="uploadFile()"/>
<p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
<p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
</div>
</form>
dans mon code j ai ces lignes
<input type="file" name="photo" id="fileUpload">
<input type="submit" name="submit" value="Upload">
dans l exemple celle ci
<input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
elle correspond a mon avis a ma ligne avec le submit puisque c est elle qui déclenche l envoi
donc cette partie de mon code devrait ressemblait a ceci
<input type="file" name="file1" id="file1">
<input type="submit" name="file1" value="Upload" onchange="uploadFile()">
pour l instant l hébergeur gratuit ou je fais des essais fais des caprices
je n ai plus d erreur mais la barre de telechargement ne fonctionne pas
<form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"id="upload_form" enctype="multipart/form-data" method="post">
<div class="form-group">
<label for="fileUpload">Fichier:</label>
<input type="file" name="photo" id="file1">
<input type="submit" name="file1" value="Upload" onchange="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
<p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
<p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
</div>
</form>
</div>
<script>function _(el) {
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
//use file_upload_parser.php from above url
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}</script>
- 1
- 2
- 3
- 4
- 5
- 6







