• Mes partages sur :

Téléchargement de fichiers avec JS, jQuery et PHP

Introduction : Je vous présente 3 mini projets permettant de télécharger un fichier envoyé avec un formulaire HTML. Le fichier est géré par javascript et jQuery afin que la page ne soit pas actualisée lorsqu'on clique sur le bouton Envoyer. Une fois qu'il est envoyé au serveur, c'est PHP qui le copie dans un dossier sélectionné.


Dans ce script :

  • Les données de formulaire sont récupérées avec l'interface FormData() de Javascript et la méthode prop() de jQuery au lieu de submit().
  • La taille de fichier max est imposée en JS et PHP.
  • Le type de fichier est géré en PHP de 3 manières différentes.
  • Le nom du fichier à sauvegarder sur le serveur est généré en PHP. Pour éviter de répéter le même nom pour deux fichiers, j'ajoute la date et l'heure dans le nom du fichier. Une boucle do() while{} vérifie si le fichier existe déjà. Si tel est le cas, le nom du fichier est généré à nouveau.
Langages et logiciels utilisé :
  • HTML5, JS, XMLHttpRequest(), jQuery, PHP 7.2.
  • Photoshop (pour préparer les images).
Projet-1 fait avec XMLHttpRequest() :

Essayer-le en ligne : ICI

Télécharger : ICI


Projet-2 fait avec $.ajax() de jQuery :

Essayer-le en ligne : ICI

Télécharger : ICI


Projet-3 fait avec $.post() de jQuery :

Essayer-le en ligne : ICI

Télécharger : ICI