nginx tutorial · 5 min read · Jan 23, 2026

Affichage de la progression des téléchargements avec nginx sur Debian

Affichage de la progression des téléchargements avec nginx sur Debian

Ce tutoriel montre comment utiliser le module de progression des téléchargements nginx pour télécharger un ou plusieurs fichiers et afficher une barre de progression pour l’utilisateur. Cela est utile, par exemple, si les utilisateurs téléchargent de gros fichiers, afin qu’ils sachent que quelque chose se passe en arrière-plan.

Je ne garantis pas que cela fonctionnera pour vous !

1 Installation de nginx-extras

Le module de progression des téléchargements nginx n’est pas activé par défaut. Vous pouvez exécuter

nginx -V

pour vérifier s’il est activé - vous devriez alors voir quelque chose comme –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-upload-progress dans la sortie. S’il n’est pas activé, installez le paquet nginx-extras :

apt-get install nginx-extras

Ensuite, exécutez à nouveau

nginx -V
  • le module de progression des téléchargements devrait maintenant apparaître dans la sortie :

root@server1:/var/www# nginx -V
nginx version: nginx/1.4.4
TLS SNI support enabled
configure arguments: –prefix=/usr/share/nginx –conf-path=/etc/nginx/nginx.conf –error-log-path=/var/log/nginx/error.log –http-client-body-temp-path=/var/lib/nginx/body –http-fastcgi-temp-path=/var/lib/nginx/fastcgi –http-log-path=/var/log/nginx/access.log –http-proxy-temp-path=/var/lib/nginx/proxy –http-scgi-temp-path=/var/lib/nginx/scgi –http-uwsgi-temp-path=/var/lib/nginx/uwsgi –lock-path=/var/lock/nginx.lock –pid-path=/run/nginx.pid –with-pcre-jit –with-debug –with-http_addition_module –with-http_dav_module –with-http_flv_module –with-http_geoip_module –with-http_gzip_static_module –with-http_image_filter_module –with-http_mp4_module –with-http_perl_module –with-http_random_index_module –with-http_realip_module –with-http_secure_link_module –with-http_spdy_module –with-http_stub_status_module –with-http_ssl_module –with-http_sub_module –with-http_xslt_module –with-ipv6 –with-mail –with-mail_ssl_module –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/headers-more-nginx-module –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-auth-pam –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-cache-purge –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-dav-ext-module –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-development-kit –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-echo –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/ngx-fancyindex –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-http-push –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-lua –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-upload-progress –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/nginx-upstream-fair –add-module=/tmp/buildd/nginx-1.4.4/debian/modules/ngx_http_substitutions_filter_module
root@server1:/var/www#

Pour activer le module, nous devons créer une petite zone dans nginx.conf (dans le conteneur http {}) qui est utilisée pour suivre les téléchargements (je nomme la zone uploads dans cet exemple) :

vi /etc/nginx/nginx.conf

| [...] http { [...] # réserver 1 Mo sous le nom 'uploads' pour suivre les téléchargements upload_progress uploads 1m; [...] } [...] |

Rechargez nginx ensuite :

/etc/init.d/nginx reload

2 Configuration de votre Vhost

Maintenant, ouvrez votre fichier de configuration vhost et mettez ce qui suit à l’intérieur du conteneur server {} (si vous utilisez ISPConfig, mettez cela dans le champ Directives nginx du site web) :

| [...] client_max_body_size 100M; location = /upload.php { try_files $uri =404; include /etc/nginx/fastcgi_params; fastcgi_pass unix:/var/lib/php5-fpm/web1.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_intercept_errors on; ## Suivre les téléchargements pour cet emplacement sur la zone définie ## ci-dessus avec un délai d'attente de 60 secondes. track_uploads uploads 60s; } location ^~ /progress { upload_progress_json_output; report_uploads uploads; } [...] |

Dans mon cas, le fichier qui traite les téléchargements (c’est-à-dire le fichier dans l’attribut action du formulaire HTML de téléchargement) s’appelle upload.php et se trouve dans le répertoire racine du document. Si votre fichier a un nom différent, ajustez location = /upload.php { en conséquence. Assurez-vous également d’utiliser les bonnes options fastcgi_pass pour votre site web (vous utiliserez probablement un autre socket que celui que j’utilise ici, ou vous utilisez des connexions TCP au lieu de sockets).

Dans la ligne track_uploads, il est important que vous utilisiez le nom de la zone upload_progress du chapitre 1 (uploads dans ce cas).

Le conteneur location ^~ /progress {} doit être pris au pied de la lettre, ce qui signifie ne le changez pas (eh bien, vous devriez changer la ligne report_uploads si votre zone upload_progress n’est pas nommée uploads). Cet emplacement sera utilisé pour interroger nginx sur l’état des téléchargements de fichiers.

Rechargez nginx ensuite (à moins que vous n’utilisiez ISPConfig qui fait le rechargement pour vous) :

/etc/init.d/nginx reload

3 Création d’un formulaire de téléchargement

Ensuite, nous avons besoin d’un formulaire de téléchargement avec un peu de JavaScript qui interroge l’emplacement de progression pendant les téléchargements. Mon fichier ressemble à ceci - nommez-le index.html, upload.html, etc. et mettez-le dans votre répertoire racine :

| Progression de téléchargement nginx

'; print '- Taille max. de téléchargement: ' . ini_get('upload_max_filesize'); ?>
0%
|

Ensuite, mettez le fichier suivant upload.php dans votre répertoire racine :

| "; } } ?> |

upload.php stocke les fichiers téléchargés dans un répertoire appelé cache, donc n’oubliez pas de créer ce répertoire dans votre répertoire racine et de lui donner les permissions appropriées afin que PHP puisse y écrire.

C’est tout. Vous pouvez maintenant appeler le fichier avec le formulaire de téléchargement dans votre navigateur et essayer de télécharger quelques fichiers :

4 Liens

Share: X/Twitter LinkedIn

Recevez de nouveaux articles dans votre boîte de réception.

Aucun spam. Désabonnez-vous à tout moment.