Share
Le téléchargement de fichiers de manière asynchrone peut s'avérer difficile dans le meilleur des cas, mais associé à CodeIgniter, il peut s'avérer une expérience particulièrement frustrante. J'ai finalement trouvé un moyen qui fonctionne non seulement de manière cohérente, mais qui reste fidèle au modèle MVC. Lisez la suite pour savoir comment!
En passant, vous pouvez trouver quelques plug-ins CodeIgniter utiles et des scripts de code sur Envato Market. Faites donc un survol pour voir ce que vous pourrez trouver pour votre prochain projet..
Dans ce tutoriel, nous utiliserons le framework PHP CodeIgniter, le framework JavaScript jQuery et le script AjaxFileUpload..
Il est supposé que vous avez une connaissance pratique de CodeIgniter et de jQuery, mais aucune connaissance préalable d’AjaxFileUpload n’est nécessaire. Il est également supposé que vous avez déjà une installation de CodeIgniter déjà configurée.
Par souci de brièveté, le chargement de certaines bibliothèques / modèles / assistants a été omis. Ceux-ci peuvent être trouvés dans le code source fourni, ce qui est assez standard.
Vous aurez également besoin d’une base de données et d’une table, appelée des dossiers. Le SQL pour créer ladite table est:
CREATE TABLE 'files' (int 'id' NOT NULL AUTO_INCREMENT PRIMARY KEY, 'nom_fichier' varchar (255) NOT NULL, 'titre' varchar (100) NOT NULL);
À la fin du didacticiel, votre structure de fichier devrait ressembler à ceci (en omettant les dossiers / fichiers non chaînés):
public_html /
-- application/
---- contrôleurs /
------ upload.php
---- des modèles/
------ files_model.php
---- vues /
------ upload.php
------ fichiers.php
-- css /
---- style.css
-- des dossiers/
-- js /
---- AjaxFileUpload.js
---- site.js
Premièrement, nous devons créer notre formulaire de téléchargement. Créer un nouveau contrôleur, appelé télécharger, et dans la méthode d'index, rendre la vue télécharger.
Votre contrôleur devrait ressembler à ceci:
Accentsconagua
la classe Upload étend CI_Controller fonction publique __construct () parent :: __ construct (); $ this-> load-> model ('files_model'); $ this-> load-> database (); $ this-> load-> helper ('url'); public function index () $ this-> load-> view ('upload'); Nous sommes également en train de charger le modèle de fichiers afin de pouvoir l'utiliser dans nos méthodes. Une meilleure alternative peut être de le charger automatiquement dans votre projet actuel..
Créez votre vue, upload.php. Cette vue contiendra notre formulaire de téléchargement.
Téléverser un fichier
N'oubliez pas de placer ajaxfileupload.js en js /.
Comme vous pouvez le constater, nous sommes en train de charger nos scripts en haut; jQuery, AjaxFileUpload et notre propre fichier js. Cela abritera notre JavaScript personnalisé.
Ensuite, nous créons simplement un formulaire HTML standard. Le div #files vide est où notre liste de fichiers téléchargés sera.
Juste pour ne pas avoir l'air assez si mauvais, permet d'ajouter quelques CSS de base à notre fichier style.css en css /.
h1, h2 font-family: Arial, sans-serif; taille de police: 25px; h2 font-size: 20px; label font-family: Verdana, sans-serif; taille de police: 12px; bloc de visualisation; input padding: 3px 5px; largeur: 250px; marge: 0 0 10px; input [type = "fichier"] padding-left: 0; input [type = "submit"] width: auto; #files font-family: Verdana, sans-serif; taille de police: 11px; #files strong font-size: 13px; #files a float: right; marge: 0 0 5px 10px; #files ul list-style: none; rembourrage à gauche: 0; #files li width: 280px; taille de police: 12px; rembourrage: 5px 0; border-bottom: 1px solid #CCC;
Créer et ouvrir site.js en js /. Placez le code suivant:
$ (function () $ ('# upload_file'). submit (function (e) e.preventDefault (); $ .ajaxFileUpload (url: './ upload / upload_file /', secureuri: false, fileElementId: ' userfile ', dataType:' json ', data: ' title ': $ (' # title '). val (), succès: fonction (data, status) if (data.status! =' error ') $ ('# fichiers'). html ('Rechargement de fichiers?
'); refresh_files (); $ ('# title'). val ("); alert (data.msg);); return false;);); JavaScript enlève le formulaire et AjaxFileUpload prend le relais. En arrière-plan, il crée une iframe et envoie les données via cette.
Nous transmettons la valeur du titre dans le paramètre data de l'appel AJAX. Si vous aviez plus de champs dans le formulaire, vous les passeriez ici.
Nous vérifions ensuite notre retour (qui sera en JSON). Si aucune erreur ne survient, nous actualisons la liste des fichiers (voir ci-dessous), effacez le champ titre. Peu importe, nous alertons le message de réponse.
Passons maintenant au téléchargement du fichier. L’URL que nous téléchargeons est / upload / upload_file /, créez donc une nouvelle méthode dans le télécharger contrôleur, et placez-y le code suivant.
fonction publique upload_file () $ status = ""; $ msg = ""; $ file_element_name = 'userfile'; if (vide ($ _ POST ['titre'])) $ status = "erreur"; $ msg = "Veuillez entrer un titre"; if ($ status! = "erreur") $ config ['upload_path'] = './files/'; $ config ['allowed_types'] = 'gif | jpg | png | doc | txt'; $ config ['max_size'] = 1024 * 8; $ config ['encrypt_name'] = TRUE; $ this-> load-> library ('upload', $ config); if (! $ this-> upload-> do_upload ($ file_element_name)) $ status = 'error'; $ msg = $ this-> upload-> display_errors (","); else $ data = $ this-> upload-> data (); $ file_id = $ this-> files_model-> insert_file ($ data ['nom_fichier'], $ _POST ['title']); if ($ file_id) $ status = "success"; $ msg = "Fichier téléchargé avec succès"; else unlink ($ data ['chemin_accès' ']); $ status = "erreur"; $ msg = "Une erreur s'est produite lors de la sauvegarde du fichier, veuillez réessayer."; @unlink ($ _ FILES [$ file_element_name]); echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Ce code est chargé dans la bibliothèque de téléchargement CodeIgniter avec une configuration personnalisée. Pour une référence complète, consultez la documentation CodeIgniter.
Nous effectuons un simple contrôle pour déterminer si le titre est vide ou non. Si ce n'est pas le cas, nous chargeons la bibliothèque de téléchargement CodeIgniter. Cette bibliothèque gère beaucoup de notre validation de fichier pour nous.
Ensuite, nous essayons de télécharger le fichier. en cas de succès, nous sauvegardons le titre et le nom du fichier (transmis via le tableau de données retourné).
N'oubliez pas de supprimer le fichier temporaire du serveur et d'exécuter l'écho du JSON afin que nous sachions ce qui s'est passé.
Conformément au modèle MVC, notre interaction avec la base de données sera gérée par un modèle..
Créer files_model.php, et ajoutez le code suivant:
class Files_Model étend CI_Model fonction publique insert_file ($ nomfichier, $ titre) $ data = array ('nomfichier' => $ nomfichier, 'titre' => $ titre); $ this-> db-> insert ('fichiers', $ data); return $ this-> db-> insert_id (); Nous devrions également créer le dossier dans lequel nos fichiers seront téléchargés. Créez un nouveau fichier dans votre racine Web appelé des dossiers, en s'assurant qu'il est accessible en écriture par le serveur.
Une fois le téléchargement réussi, nous devons actualiser la liste des fichiers pour afficher les modifications..
Ouvrir site.js et ajoutez le code suivant au bas du fichier, en dessous de tout le reste.
function refresh_files () $ .get ('./ upload / files /') .success (fonction (données) $ ('# fichiers'). html (données);); Cela appelle simplement une URL et insère les données renvoyées dans un div avec un identifiant de fichiers.
Nous devons appeler cette fonction lors du chargement de la page pour afficher initialement la liste des fichiers. Ajoutez ceci dans la fonction de préparation de document en haut du fichier:
refresh_files ();
L'URL que nous appelons pour obtenir la liste de fichiers est / upload / files /, créez donc une nouvelle méthode appelée des dossiers, et placez-le dans le code suivant:
fonction publique files () $ files = $ this-> files_model-> get_files (); $ this-> load-> view ('fichiers', tableau ('fichiers' => $ fichiers)); Une méthode assez petite, nous utilisons notre modèle pour charger les fichiers actuellement sauvegardés et les transmettons à une vue..
Notre modèle gère la récupération de la liste de fichiers. S'ouvrir files_model.php, et ajouter dans le get_files () une fonction.
fonction publique get_files () return $ this-> db-> select () -> à partir de ('fichiers') -> get () -> result (); C'est très simple: sélectionnez tous les fichiers stockés dans la base de données.
Nous devons créer une vue pour afficher la liste des fichiers. Créez un nouveau fichier, appelé fichiers.php, et collez le code suivant:
Aucun fichier téléchargé
Cela parcourt les fichiers et affiche le titre et le nom de fichier de chacun. Nous affichons également un lien de suppression, qui inclut un attribut de données de l'ID de fichier.
Pour compléter le didacticiel, nous ajouterons la fonctionnalité permettant de supprimer le fichier, en utilisant également AJAX..
Ajoutez ce qui suit dans la fonction de préparation du document:
$ ('. delete_file_link'). live ('click', function (e) e.preventDefault (); if (confirm ('Êtes-vous sûr de vouloir supprimer ce fichier?')) var link = $ (this ); $ .ajax (url: './upload/delete_file/' + link.data ('file_id'), dataType: 'json', success: function (data) files = $ (# files); if ( data.status === "success") link.parents ('li'). fadeOut ('fast', function () $ (this) .remove (); if (files.find ('li'). longueur == 0) files.html ('Aucun fichier téléchargé
'); ); else alert (data.msg); ); ); C'est toujours une bonne idée d'obtenir une confirmation de l'utilisateur lors de la suppression d'informations..
Quand un lien de suppression est cliqué, nous affichons une boîte de confirmation demandant si l'utilisateur est sûr. S'ils le sont, nous appelons / upload / delete_file, et en cas de succès, nous le supprimons de la liste.
Comme ci-dessus, l'URL que nous appelons est / upload / delete_file /, alors créez la méthode supprimer le fichier, et ajoutez le code suivant:
fonction publique delete_file ($ file_id) if ($ this-> files_model-> delete_file ($ file_id)) $ status = 'success'; $ msg = 'Fichier supprimé avec succès'; else $ status = 'error'; $ msg = 'Une erreur s'est produite lors de la suppression du fichier, veuillez réessayer'; echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Encore une fois, nous laissons le modèle faire le gros du travail en faisant écho à la sortie.
Nous sommes maintenant à la dernière pièce du puzzle: nos deux dernières méthodes.
fonction publique delete_file ($ file_id) $ file = $ this-> get_file ($ file_id); if (! $ this-> db-> where ('id', $ file_id) -> delete ('fichiers')) return FALSE; unlink ('./ files /'. $ file-> nom du fichier); renvoyer VRAI; function publique get_file ($ file_id) return $ this-> db-> select () -> from ('files') -> where ('id', $ file_id) -> get () -> row (); Comme nous ne faisons que transmettre l'ID, nous devons obtenir le nom du fichier. Nous créons donc une nouvelle méthode pour charger le fichier. Une fois chargé, nous supprimons l’enregistrement et le fichier du serveur..
Voilà, tutoriel complet! Si vous l'exécutez, vous devriez pouvoir télécharger un fichier, le voir apparaître, puis le supprimer. le tout sans quitter la page.
De toute évidence, les vues peuvent faire avec un peu de beauté, mais ce tutoriel aurait dû vous en donner assez pour pouvoir l'intégrer dans votre site..
Cette méthode présente cependant quelques inconvénients:
div lors du téléchargement du fichier, au lieu de les remplacer complètement.Merci d'avoir lu!
