Upload de fichiers par formulaire

Je ne vous ferai pas l'injure de vous demander si vous savez ce qu'est un download (ou téléchargement). Toute personne ayant accès au net depuis un minimum de temps aura un jour ou l'autre eu à télécharger un fichier à partir d'un site. Et si je vous disais que l'upload consiste à réaliser l'inverse, cela serait fort peu intéressant.
Mais dès lors, de quoi allons-nous parler ? Eh bien, de l'upload ! Mais pas en surface, nous allons en effet tenter de comprendre ce qui se passe derrière votre écran pendant un transfert de ce type.

Voyons d'abord les protagonistes. Nous avons d'une part le PC du visiteur, et de l'autre le serveur. Entre les deux, une connexion Internet qui permet le transfert de données de l'un vers l'autre. En clair, nous avons deux ordinateurs reliés par une connexion Internet. L'upload, comme vous l'aurez compris, consiste à faire passer un fichier de l'ordinateur du visiteur vers le serveur.



Pour ce faire, il faut bien sûr utiliser un formulaire, dans lequel le visteur devra sélectionner le fichier à envoyer vers le serveur. Je ne vais pas vous expliquer ce qu'est un formulaire, le cours XHTML du SdZ, que vous devriez avoir lu, est là pour ça. Par contre, nous allons voir de quelle manière utiliser un formulaire pour permettre au visiteur de sélectionner un fichier.

Donc, dans un premier temps, le visiteur sélectionne le fichier. Ensuite, après avoir rempli le reste du formulaire, il clique sur le bouton pour l'envoyer.
A ce moment, le navigateur du client demande au serveur la page "cible" (spécifiée grâce à l'attribut action du formulaire), en lui envoyant une requête HTTP. Dans cette requête, le navigateur fourni diverses informations (page demandée, nom et version du navigateur, cookies qu'il possède pour ce site, ...) dont les données du formulaire.

Le serveur (Apache par exemple) analyse la requête et passe le relais à PHP. Juste avant de lancer l'execution de la page demandée, PHP s'occupe des données envoyées par le formulaire:

• Les champs textuels (text, checkbox, select, textarea, ...) sont copiés dans le tableau superglobal $_POST
• Les informations concernant les champs de type file sont enregistrées dans le tableau superglobal $_FILES
• Les fichiers sont temporairement placés dans le dossier temporaire du serveur

Une fois que tout est prêt, PHP commence à exécuter le script de la page demandée. C'est donc le script PHP qui va pouvoir gérer le fichier. Il ne faudra pas oublier que le fichier est dans un dossier temporaire, et que donc, si on souhaite le garder, il faudra le déplacer ailleurs (dans un dossier du site par exemple). Si au contraire, on décide de ne pas garder le fichier (par exemple, si on remarque qu'il est trop grand, que ce n'est pas une image, ...) il suffit de ne pas le déplacer, il sera effacé automatiquement lorsque le script aura fini d'être exécuté.

Nous allons voir plus en détail comment mettre en place le script.

Bien, nous voici donc à la première étape, la création d'un formulaire. Le visiteur qui veut uploader un fichier doit passer par un formulaire.

Le champ de sélection

Eh bien non. Ce serait terriblement dangereux. En effet, si il suffisait au script PHP d'avoir l'adresse du fichier pour pouvoir le prendre sur le disque dur du visiteur, un webmaster mal intentionné pourrait prendre tous les fichiers qu'il veut, et donc même ceux qui contiennent vos informations confidentielles ! C'est pourquoi on utilise un type de champ particulier, où seul le visiteur pourra choisir le fichier que le navigateur va envoyer au serveur.

Il faut utiliser la balise XHTML <input /> que vous connaissez déjà sous trois formes :
Code : HTML
Nous allons utiliser une autre forme de cette balise, qui permet au visiteur de sélectionner un fichier dans une liste. Elle est fortement semblable aux trois formes précédentes, mais son type est "file" et elle ne peut pas avoir de valeur par défaut :
Code : HTML
Citation : Aperçu
Elle permet, comme vous le voyez, de sélectionner un fichier à envoyer. Vous pouvez en mettre autant que vous le souhaitez dans votre formulaire, mais n'oubliez pas de leur donner des noms différents .

L'en-tête du formulaire

Pour que le navigateur sache qu'il doit envoyer un fichier, on l'indique dans l'en-tête du formulaire. C'est très simple, mais il faudra bien y penser pour que votre formulaire fonctionne correctement.
Vous connaissez déjà la balise <form>, il ne devrait donc pas vous être difficile d'y ajouter une propriété. Il s'agit de la propriété enctype, qui indique le type d'encodage des données. Elle prendra la valeur "multipart/form-data", qui spécifie que le formulaire envoie des données binaires (fichier) et du texte (champs de formulaire). Ce qui nous donne
Code : HTML
Profitons-en pour nous intéresser aux deux autres propriétés du formulaire :

• method : c'est la façon dont les informations seront envoyées, soit par l'url si la méthode est "GET", soit dans la requête HTTP si la méthode est "POST". Dans le cas de l'envoi d'un fichier, cette propriété DOIT être placée à "POST", car le fichier ne peut pas être passé par l'url . Il existe d'autrse valeurs possibles, mais qui ne nous interressent pas ici.
• action : c'est la page qui sera appelée lors de l'envoi du formulaire. C'est-à-dire, par exemple, le script PHP qui va traiter la réception du fichier. Vous pouvez placer le script sur la même page que le formulaire, comme vous avez appris à le faire dans le cours PHP (que vous devez aussi avoir lu pour poursuivre ce tutoriel).

Restrictions

Un webmaster sain d'esprit ne laissera pas n'importe qui uploader n'importe quoi . C'est pourquoi il est nécessaire d'apprendre à restreindre l'envoi. Nous verrons par la suite que c'est en PHP que se fera la plus grosse partie de la vérification, mais il est déjà possible, en HTML, de fixer une limite de taille sur l'envoi.

C'est en fait juste une variable que l'on communique au navigateur dans le formulaire. Comme le visiteur n'a pas besoin de voir ce champs, on le met de type hidden.
Code : HTML
Cette restriction se fait en Octets. Normalement, depuis quelques années, 1 Go = 1'000 Mo = 1'000'000 Ko = 10^9 octets, mais cette norme n'est pas suivie par tout le monde, il existe encore beaucoup de cas où le "vieux" système de conversion est utilisé:
Code : Console
Vous devez placer ce champ AVANT le champ de sélection du fichier. Remarque : ce champ fixe la limite totale des uploads, et donc comprend tous les fichiers uploadés par ce formulaire.

Finalisation / Exemple

Nous avons maintenant vu tout ce qui est nécessaire pour réaliser un formulaire d'upload. Bien sûr, vous pouvez ajouter autant de champs que vous le souhaitez. Pour ma part, je vais par exemple ajouter un champ de type texte, pour indiquer une brêve description. J'ai aussi décidé de permettre au visiteur d'envoyer deux fichiers avec le formulaire. Au final, mon code XHTML ressemble à ceci:
Code : HTML
Citation : Aperçu

Voilà qui clôture la réalisation du formulaire. Nous allons maintenant passer à la réception du fichier par le script PHP .

Poursuivons notre petite histoire. Le formulaire est en place, et le visiteur le remplit, puis le valide. Comme je vous l'ai expliqué, les fichiers sont alors uploadés et placés dans un répertoire temporaire. L'avantage, c'est que dans ce dossier, seul le script PHP va pouvoir y accéder.

Nous allons donc contrôler le fichier, puis le déplacer vers un dossier du site. On peut contrôler plusieurs choses: la taille, le type, le nom, les dimensions (si c'est une image), ...

Le tableau $_FILES contient certaines informations sur les fichiers. Pour chaque champ de type file, on peut obtenir les informations le concernant dans le tableau $_FILES[attribut_name] On retrouve actuellement les informations suivantes:

Code : PHP

Contrôles sur le fichier

Une première vérification consiste à savoir si le fichier a bien été uploadé. Pour ce faire, nous allons utiliser le code d'erreur du fichier. Ensuite nous pourrons effectuer les autres tests.
Code : PHP

On peut même préciser de quel type d'erreur il s'agit, en comparant le code d'erreur à plusieurs constantes:

Citation

Commençons par la taille maximale. Pas difficile, c'est une simple comparaison .
Code : PHP

Pour le type, nous n'allons pas utiliser le 'type' du tableau, mais l'extension du fichier, ce qui sera plus simple. Rassurez-vous, cela revient exactement au même, car le 'type' est pris en fonction de l'extension. Ce qui signifie aussi, malheureusement, qu'on ne peut pas être sûr de la nature du fichier.
Le moyen le plus efficace et le plus polyvalent est de placer les extensions autorisées dans un tableau, puis de vérifier que l'extension du fichier est bien dans ce tableau. On pourrait aussi, si on souhaitait autoriser tous les types de fichier mis à part quelques uns, lister les extensions non autorisées, et vérifier ensuite que l'extension du fichier uploadé ne s'y trouve pas. Pour cette dernière méthode, il suffit alors d'ajouter une négation à la condition grâce à '!'.
Code : PHP

Pour contrôler les dimensions d'une image, il suffit d'utiliser une fonction PHP, getimagesize() qui retourne un tableau. Nous devons bien évidemment spécifier l'adresse du fichier, qui pour l'instant se trouve dans le dossier temporaire. La fonction retourne alors un tableau dont l'index 0 donne la largeur et l'index 1 la hauteur de l'image. C'est ici encore une simple condition.
Code : PHP

En utilisant conjointement ces deux ou trois tests, on peut s'assurer que le fichier est correct et que donc, nous pouvons le déplacer dans un dossier du site sans danger. Je ne vous ai pas donné le code final, mais vous devriez être capable de le faire facilement avec les lignes de code que je vous ai données. Si vous n'y arrivez pas, c'est que vous devriez sans doute relire le cours, car vous n'avez pas compris le mécanisme de fonctionnement de PHP.

Déplacer le fichier

Pour déplacer le fichier, nous avons besoin de deux informations : l'emplacement de départ, que nous connaissons déjà grâce à la variable superglobale $_FILES, et l'emplacement de destination, que nous devons fixer nous-mêmes. Ici, plusieurs possibilités s'offrent à nous. Il est toujours important de bien choisir la façon dont on va nommer les fichiers. Il faut se rappeler deux règles fondamentales: deux fichiers ne peuvent pas avoir le même nom dans le même dossier, et il faut faire attention à l'extension. Ce qui veut dire qu'on ne va presque jamais garder le nom de départ du fichier, car deux visiteurs différents pourraient avoir un fichier du même nom. Pour l'extension, nous verrons par la suite comment contourner le problème. Voici d'abord quelques exemples de noms:

• Un avatar: on peut lui donner le numero unique (id) du membre. (1, 2, 343, ...)
• Une image perso: on peut créer un dossier par membre (si il peut uploader plusieurs fichiers) et garder le nom de départ
• Un tracker torrent: on peut lui attribuer un numero unique (son id dans une BDD par exemple)

Il existe de nombreux autres choix possibles: attribuer un nom alphanumerique généré au hasard, la date actuelle.

Quelques fonctions utiles:

Créer un dossier: bool mkdir ( string $pathname [, int $mode [, bool $recursive [, resource $context ]]] )
Créer un identifiant alphanumerique unique: string uniqid ([ string $prefix [, bool $more_entropy ]] )

Code : PHP

Pour l'extension, on a plusieurs possibilités: on peut garder celle de départ, si par exemple il s'agit d'une image ou d'un document pdf. Par contre, si l'extension de départ est php ou html, il vaut mieux changer l'extension, pour éviter que le visiteur puisse placer ses propres scripts sur le site. Il y a plusieurs possibilités: on peut se contenter d'ajouter une extension après celle déjà existante (par exemple page2.php deviendrait page2.php.file), on peut remplacer l'extension par une autre (page2.php deviendrait page2.file), ou on peut finalement retirer l'extension (page2.php deviendrait page2). Evidement lorsqu'un visiteur voudra télécharger le fichier, il faudra trouver comment remettre l'extension correcte. Mais nous verrons comment faire plus tard.

Une fois le nom du fichier choisi, il faut déplacer le fichier du répertoire temporaire vers le dossier de destination. Il existe pour ça une fonction très simple, qui fonctionne presque exactement comme la fonction copy(), il s'agit de la fonction move_uploaded_file(). La principale différence avec copy, c'est qu'elle vérifie également que le fichier que l'on souhaite déplacer provient bien d'un formulaire PHP. Voici un exemple d'utilisation:
Code : PHP
La fonction renvoie vrai ou faux, selon que le fichier a bien été déplacé ou non. On peut donc s'assurer que le transfert a bien eu lieu, ce qui constitue la dernière étape dans l'upload du fichier.



Nous allons maintenant voir comment nous pouvons tirer parti de l'upload de plusieurs manières.

Une fois le fichier uploadé et déplacé dans un dossier du site, il est possible d'effectuer plusieurs actions. Voici, parmi les nombreuses possibilités, quelques-unes que nous allons étudier :

• Enregistrement des infos dans une BDD.
• Téléchargements avec compteur.
• Création de miniature.

Enregistrement des infos dans une BDD

Je ne vais pas vous apprendre à créer une table, ou à insérer un nouvel enregistrement. Par contre, je peux vous donner quelques conseils pour bien utiliser votre BDD.

Tout d'abord, notons quelles informations sont utiles à enregistrer : le titre, la description, le nom du fichier, son nom dans le dossier du site, la date d'ajout, la taille, et, si vous avez un espace membre, pourquoi ne pas y ajouter l'id du membre qui a posté le fichier.

Le nombre de champs, et ceux que vous choisissez, dépend fortement de l'utilisation que vous souhaitez faire de ces fichiers. S'il s'agit juste d'un avatar, il est certainement inutile d'enregistrer des infos dans une BDD, il suffit de donner comme nom à l'image l'id du membre, et vous éviterez ainsi une requête inutile .
S'il s'agit, au contraire, d'une galerie, il est très pratique d'enregistrer les infos dans une table, en y ajoutant par exemple une note attribuée par les visiteurs. Réfléchissez toujours à ce dont vous aurez besoin par la suite.

Voici, par exemple, la table que je pourrais créer pour un mini-espace membre permettant d'uploader des fichiers :

Citation : Table MySQL



La raison pour laquelle j'ai mis un champ filesize est simple, pour éviter de devoir aller chercher la taille pour chaque fichier, on l'enregistre dans la BDD, ce qui permet d'économiser un temps de traitement intéressant. Le champ d'identification est lui toujours très utile, en mode auto_increment, il vous permettra de directement pouvoir accéder aux infos d'un fichier particulier.

Enfin, n'oubliez pas d'optimiser vos tables, en utilisant les types corrects :

• un nombre est de type TINYINT, SMALLINT, MEDIUMINT, INT, BIGINT, FLOAT, DOUBLE ou DECIMAL selon sa précision, et n'oubliez d'indiquer sa taille selon vos besoins.
• un texte est de type VARCHAR (moins de 256 caractères) ou TEXT (plus de 256 caractères).
• une date est de type DATE pour uniquement la date, TIME pour uniquement l'heure, ou DATETIME pour les deux réunis.
• un booléen (VRAI / FAUX) n'a pas de type particulier. On utilise un TINYINT de taille 1 positionné à 0 ou 1 (pas ENUM!).
• une suite binaire est de type BLOB ou BINARY.

Téléchargements avec compteur

Le principe est assez simple, on veut permettre aux visiteurs de télécharger un fichier, tout en comptant le nombre de téléchargements de celui-ci. Il nous faut bien sûr utiliser la table que vous aurez créé, en y ajoutant un champ permettant de mémoriser le nombre de 'download'. Il s'agit donc d'un champ de type INT(5), appelé par exemple up_counter .

Imaginons qu'une page référence les différents fichiers (Ce que vous savez faire, puisqu'il suffit de lister le contenu de la table ) avec des liens pour télécharger les fichiers. Ces liens indiquent le numéro d'identification du fichier, par exemple :

Code : Console

La première chose à faire, c'est de récupérer quelques informations dans la table pour pouvoir les envoyer au visiteur. C'est une simple requête de selection :

Code : SQL

Bien sûr, les ... doivent être remplacés par l'id donné par le lien ( $_GET['file'] ).

Vous devez ensuite mettre à jour le nombre de téléchargements. C'est facile, il suffit d'incrémenter un champ de la table :

Code : SQL
Je vais maintenant vous montrer le code qui va servir à envoyer le fichier, en le commentant un maximum. Surtout, ne vous contentez pas de le copier, comprenez-le ! Si j'ai évité de vous donner trop de code dans ce tutoriel, c'est pour vous forcer à réfléchir. Le but d'un programmeur ou d'un codeur n'est pas de pouvoir copier un bout de code, c'est de pouvoir l'adapter à ses besoins, produire un code optimisé et juste pour chaque application rencontrée.

Code : PHP

Le nom du fichier (up_final) correspond au nom que le serveur va proposer au visiteur. Par exemple, si indique filename="PD6StdFR6011.rxr", voilà quoi pourrait ressembler la fenêtre de téléchargement:



C'est donc ici que vous pourrez remédier au problème de l'extension (il suffit de l'ajouter au nom de fichier).

Création de miniatures

Je ne vais pas m'attarder sur le sujet. En fait, j'ai simplement remarqué que beaucoup de codeurs inexpérimentés avaient du mal avec la création et la gestion de miniatures. Je vais simplement vous donner quelques conseils, mais je ne vais pas vous donner la fonction pour créer des miniatures, ce n'est pas l'objet de ce tutoriel.

Une miniature est une image, qui, comme son nom l'indique, permet d'avoir un aperçu en plus petit d'une image trop grande pour être facilement et rapidement affichée. C'est le cas d'une galerie photo, où on affiche sur une page une série de miniatures, chacune donnant accès, par un simple lien, à l'image de taille réelle.

Une première chose à vérifier, c'est que les miniatures prennent peu de place, aussi bien en taille physique (le nombre de pixels) qu'en poids (le nombre d'octets). Si les miniatures sont trop volumineuses, penser à réduire la taille ou à diminuer la qualité, sans pour autant la rendre trop floue.

Ensuite, ne placez pas les miniatures dans le même dossier que les originales, placez-les dans un dossier spécial "miniatures", tout en gardant le même nom que l'image originale, de façon à pouvoir facilement l'utiliser. En effet, si vous avez comme nom, pour les deux fichiers, "image112", il vous suffira de changer le dossier pour pouvoir afficher soit l'une, soit l'autre. Vous n'aurez ainsi besoin que d'un seul champ pour les deux noms dans la BDD ( up_filename ). Par exemple :

Code : PHP

Pour ce qui est de l'endroit où placer le code pour créer la miniature, c'est bien de le faire juste avant l'insertion des infos du fichier uploadé dans la BDD, sur la page d'upload.

Nous y voilà enfin, nous touchons à la fin de ce tutoriel, qui, je l'espère, vous aura permis de maîtriser un peu mieux certaines facettes de PHP. Mais avant de nous quitter, je tiens à vous offrir une petite fonction ou deux. Vous allez vite comprendre quel en est l'intérêt.

Pur Concentré

Pour faciliter l'upload de plusieurs fichiers, cette petite fonction rassemble les tests et déplace le fichier.

Code : PHP

Son utilisation est très simple, et permet facilement de gérer une suite de fichiers. On indique en premier paramètre le nom du fichier (c'est le name du formulaire), puis le chemin de destination avec le nom complet du fichier (comme par exemple un nom unique). On peut ensuite indiquer une taille limite, ou FALSE pour ne pas en fixer, elle est en octets. Enfin, on peut préciser dans un tableau les extensions autorisées, ou FALSE si elles sont toutes permises.