Notez que la liste non ordonnée avec l'id "fichiers" est vide. Ne vous inquiétez pas pour le moment car nous allons remplir cette section avec les fichiers du serveur..

Étape 3 - Ajouter CSS et JS

J'ai utilisé jQuery pour créer la possibilité de basculer la visibilité de certains types de fichiers sans avoir à actualiser la page..
Ceci est purement facultatif et la suppression du JS accélèrera quelque peu le chargement de la page. Ajoutons donc les lignes suivantes à l'en-tête du fichier HTML.

Je charge jQuery depuis une source externe au moment de l'exécution. De nouveau si vous préférez, vous pouvez changer cela pour que le fichier soit chargé depuis une source locale avec cette ligne.

Le chargement du fichier directement à partir de code.jquery.com garantit que nous utilisons la dernière version et économise notre bande passante à chaque chargement de page, mais si le serveur code.jquery.com venait à être en panne ou surchargé, le fichier ne serait pas disponible. quand on en a besoin.

Créez un nouveau dossier appelé style et créez-y un nouveau fichier CSS portant le nom style.css. Ce sera le fichier qui indique au navigateur à quoi nous voulons que la page ressemble. Il y a beaucoup de CSS ici, mais c'est assez simple pour que tout le monde puisse le suivre.

Maintenant, la page devrait ressembler à ce qui suit.

 @CHARSET "ISO-8859-1"; body background-color: #cddcec; famille de polices: "Arial"; taille de police: 11px;  div # conteneur width: 600px; marge: 0px auto; bordure: 1px solide # e6eef6; couleur de fond: #ffffff;  div # conteneur h1 background-color: # 4b75b3; marge: 0px; rembourrage: 8px; famille de polices: "Arial"; poids de police: normal; bordure: solide 1px # 3564a9;  div # conteneur fieldset margin: 20px; bordure: 1px solide # 98b9d0;  ul # menu list-style-type: none; marge: 4px; remplissage: 0px;  ul # menu li float: left; marge: 4px;  ul # menu li.active background-color: # 98b9d0; border-left: 1px solide # 3564a9; bordure supérieure: solide 1px # 3564a9; border-bottom: 1px solid # e6eef6; border-right: 1px solid # e6eef6;  ul # menu li a text-decoration: none; taille de police: 10px; rembourrage: 2px; couleur: # 3564a9;  ul # fichiers list-style-type: none; marge: 40px 0px 0px 0px; remplissage: 0px;  ul # fichiers li background-color: # fff7c0; border-bottom: 1px solid #efefef; rembourrage: 2px; marge inférieure: 1px; 

Ce que nous devrions maintenant avoir est illustré dans l'image suivante.

Étape 4 - Gestion des soumissions d'entrée de fichier avec PHP

Commençons le côté PHP du didacticiel en créant une classe de paramètres. Dans cette classe, nous pouvons enregistrer le mot de passe de téléchargement ainsi que le chemin du fichier pour le dossier de téléchargement.
Nous pouvons ensuite inclure la classe dans notre page et utiliser ses valeurs en cas de besoin.
Vous pouvez écrire des fichiers PHP avec à peu près les mêmes outils que vous utilisez pour écrire HTML et CSS, mais n'oubliez pas de sauvegarder le fichier avec le suffixe .php.

Sans aller plus loin dans la programmation orientée objet (OOP), le code crée une nouvelle classe avec le type de valeurs accessibles sans instancier la classe..
Nous pouvons maintenant accéder à ses valeurs en appelant simplement Settings :: $ password; et Paramètres :: $ uploadFolder; C'est aussi l'endroit où vous pouvez changer le mot de passe quand bon vous semble.
le marque le début et la fin d'un segment de code PHP. Ces segments peuvent être écrits dans des pages HTML normales et le serveur les interprétera lorsque la page sera demandée..

Ok, maintenant nous passons aux affaires. Dans le fichier html avec lequel nous travaillons, ajoutons ce qui suit dans le haut du fichier. Oui, avant le étiquette.

  
Nous demandons d’abord à l’interprète PHP d’inclure notre fichier de paramètres. J'ai également mis en place une nouvelle variable $ message. Plus tard, j'écrirai les informations de processus dans cette variable et les afficherai à l'utilisateur..
 
 // L'utilisateur a-t-il téléchargé quelque chose? if (isset ($ _ FILES ['fichier']))) 
 
Si le formulaire a été soumis avec un fichier, le tableau $ _FILE devrait avoir une valeur avec la clé utilisée comme nom du champ de saisie du fichier..
 
 $ target_path = Settings :: $ uploadFolder; $ target_path = $ target_path. temps() . '_'. nom_base ($ _FILES ['fichier'] ['nom']]);
 
Ici, nous obtenons le chemin du dossier de téléchargement que nous avons spécifié dans les paramètres. Sur la ligne 2, nous ajoutons (concaténons) le nom du fichier téléchargé dans le chemin cible..
Notez également que j'ai ajouté l'horodatage du serveur actuel au début du nom de fichier. Il y a deux raisons pour cela.
Premièrement, il sert à stocker la date et deuxièmement, il s'assurera que tous les fichiers portent des noms différents..
Si nous utilisions une base de données derrière cette application, l'heure de l'ajout serait indiquée et nous pourrions sérialiser les noms de fichiers et enregistrer le nom d'origine uniquement dans la table de la base de données.,
mais comme il n'y a pas de base de données, nous pouvons simplement utiliser cette solution de contournement.
 
 // Vérifiez le mot de passe pour vérifier le téléchargement légal si ($ _ POST ['password']!! = Paramètres :: $ password) $ message = "Mot de passe invalide!";  autre 
 
Si la soumission a été faite sans mot de passe ou si le mot de passe indiqué était autre que celui défini dans les paramètres, nous ne traiterons pas le fichier et ne renverrons qu'un message indiquant un faux mot de passe..
 
 // Essayez de déplacer le fichier téléchargé dans le dossier désigné si (move_uploaded_file ($ _ FILES ['fichier'] ['nom_mpc'], $ chemin_cible)) $ message = "Le fichier". nom_base ($ _FILES ['fichier'] ['nom']]). "a été téléchargé";  else $ message = "Une erreur s'est produite lors du téléchargement du fichier, veuillez réessayer!"; 
 
Ok, le mot de passe était correct, et maintenant? Maintenant, nous "sauvegardons" le fichier. Je dis sauvegarder entre parenthèses car le fichier est déjà dans le serveur; c'est juste dans le dossier temporaire.
Donc, pour rendre le fichier accessible et pour vous assurer que le serveur ne le supprimera pas lorsque le temp sera effacé, nous devons le déplacer dans un emplacement sûr. J'ai utilisé la fonction move_uploaded_file.
La fonction prend deux arguments. Le premier est le nom temporaire du fichier attribué automatiquement par le serveur, et le second est le chemin cible que nous avons attribué précédemment..
La fonction renvoie une valeur booléenne indiquant le succès de l'opération. De nouveau, nous définissons la valeur du message pour informer l'utilisateur de ce qui s'est passé.
 
 if (strlen ($ message)> 0) $ message = '
'. $ message. '
'; 
 
Et c'est aussi simple que de télécharger des fichiers sur un serveur avec PHP! Ici, je viens de vérifier si quelque chose a été écrit dans la variable de message (longueur supérieure à 0) et le formater afin que nous puissions le styler avec CSS.
 
Étape 5 - Lister les fichiers téléchargés
 
 / ** LISTE DES FICHIERS CHARGÉS ** / $ upload_files = ""; // Répertoire ouvert pour la lecture de $ dh = opendir (Settings :: $ uploadFolder);
 
La première chose à faire est de créer un descripteur de dossier. Tout ce qu'il faut, c'est une commande. La variable upload_files est l'endroit où nous allons écrire les noms de fichiers du dossier au format HTML..
 
 // Boucle à travers les fichiers while (($ file = readdir ($ dh))!! == false) 
 
Ici, nous parcourons les fichiers du dossier. Tant que nous pouvons lire le fichier suivant du dossier dans la variable de fichier, nous le faisons et passons à autre chose. Une fois que nous avons parcouru tous les fichiers, la fonction renvoie false et termine la boucle..
 
 if ($ file! = '.' && $ file! = '…') 
 
Le '.' et '…' sont également renvoyés par cette fonction, nous devons donc nous assurer que nous n'essayons pas de faire quoi que ce soit avec ceux.
 
 $ filename = Settings :: $ uploadFolder. $ file; $ parts = explode ("_", $ fichier);
 
Nous ajoutons le nom du fichier dans le chemin du dossier uploads et l'enregistrons en tant que variable de nom de fichier. Puis on explose le nom du fichier au caractère '_'.
Cette fonction retourne un tableau de chaînes divisant la chaîne d'origine à chaque fois qu'il y a un '_'.
Puisqu'il y a un de ces caractères, nous recevrons un tableau avec la partie timestamp comme cellule 1 et le nom de fichier d'origine comme cellule 2.
 
 $ size = formatBytes (taille de fichier ($ filename)); $ added = date ("m / j / Y", $ parts [0]); $ origName = $ parts [1];
 
Maintenant que nous avons la valeur d'horodatage en tant que chaîne propre, nous pouvons la formater en une date et enregistrer le nom de fichier d'origine en tant que variable propre.
La fonction de taille de fichier fournie par PHP renvoie la taille du fichier en octets uniquement. Nous allons donc le formater sous une forme plus lisible avec la fonction formatBytes, qui est couverte dans un peu.
 
 $ filetype = getFileType (substr ($ file, strlen ($ file) - 3)); $ Upload_files. = "
$ origName $ taille - $ ajouté
\ n ";
 
Lors du téléchargement d'un fichier sur le serveur, PHP nous fournit les informations sur le type de fichier, mais comme nous n'avons aucun endroit pour stocker ces informations, nous devrons essayer d'obtenir le type de fichier avec une fonction personnalisée..
Je donne les trois derniers caractères du nom de fichier en tant que paramètre de la fonction getFileType (comme nous le verrons plus tard). J'utilise la variable filetype pour styler les différents fichiers avec CSS.
Il ne reste plus qu'à générer une chaîne HTML et l'ajouter à la variable upload_files et à fermer le descripteur de dossier..
 
  closedir ($ dh);
 
 if (strlen ($ upload_files) == 0) $ upload_files = "
Aucun fichier trouvé
";
 
Si aucun fichier n'a été trouvé, configurez la variable upload_files pour afficher un message..
 
Nous devons également afficher la chaîne upload_files quelque part; alors ajoutez cette ligne à l'intérieur du 
 avec l'id 'fichiers'.
 
 
 
Étape 6 - Fonction auxiliaire
 
La fonction getFileType essaie de deviner le type du fichier en lisant les derniers caractères de son nom. Cela ne fonctionnera pas avec des extensions comme .jpeg et .tiff.
Pour le rendre plus universel, il faudrait lire une sous-chaîne commençant par la période et se terminant par la fin du nom du fichier..
Mais alors, si le nom ressemble à my.new.car.pic, nous aurions new.car.pic comme extensions..
Donc, pour que cela fonctionne vraiment, il nous faudrait trouver le dernier période dans le nom et prendre une sous-chaîne à partir de là.
Mais pour la portée de ce tutoriel c'est assez proche.
 
 fonction getFileType ($ extension) $ images = array ('jpg', 'gif', 'png', 'bmp'); $ docs = array ('txt', 'rtf', 'doc'); $ apps = array ('zip', 'rar', 'exe'); if (in_array ($ extension, $ images)) renvoie "Images"; if (in_array ($ extension, $ docs)) renvoie "Documents"; if (in_array ($ extension, $ apps)) renvoie "Applications"; revenir ""; 
 
Cette fonction suivante formate les octets dans un format plus lisible. Juste des mathématiques de base - rien de plus. La fonction elle-même est issue des commentaires de la fonction PHP.net. 
 
 fonction formatBytes ($ octets, $ précision = 2) $ unités = tableau ('B', 'KB', 'MB', 'GB', 'TB'); $ octets = max ($ octets, 0); $ pow = floor (($ octets? log ($ octets): 0) / log (1024)); $ pow = min ($ pow, count ($ unités) - 1); $ octets / = pow (1024, $ pow); round round ($ octets, $ précision). ". $ unités [$ pow];?>
 
Et c'est tout pour la partie PHP. Juste un peu plus de JS et CSS et nous avons tous terminé.
 
Étape 7 - Une touche de CSS pour une lisibilité accrue
 
Ce que nous avons jusqu'ici devrait ressembler à ceci:
  
Mais pour utiliser la fonction getFileType et le nom de la classe qu'elle renvoie, j'ai ajouté les lignes CSS suivantes dans le fichier style.css..
 
 ul # fichiers li a text-decoration: none; couleur: # 3564a9; rembourrage: 2px 25px; position de fond: gauche; répétition de fond: non répétée;  ul # fichiers li.Documents a background-image: url ('… /images/text.jpg');  ul # fichiers li.Images a background-image: url ('… /images/picture.jpg');  ul # fichiers li.Applications a background-image: url ('… /images/zip.jpg');  p.error background-color: # fff7c0; border-bottom: 1px solid #efefef; poids de police: gras; couleur: # ff0000; rembourrage: 6px; 
 
J'attribue une icône à chaque type de fichier. Les icônes que j'ai utilisées proviennent de la magnifique collection disponible sur http://www.famfamfam.com.
Maintenant, ce que nous devrions avoir est quelque chose comme ça.
  
Ah, beaucoup mieux.
 
Étape 8 - Basculement de la visibilité des fichiers avec jQuery
 
Pour finir, ajoutons quelques fonctionnalités supplémentaires avec JavaScript. Créez un nouveau dossier appelé "js" et créez un nouveau fichier dans ce dossier, filestorage.js..
Ajoutez ensuite la ligne suivante à la fin de la page HTML juste avant la  étiquette.