Comment programmer avec Yii2 Télécharger des fichiers

Ce que vous allez créer

Si vous demandez, "Qu'est-ce que Yii?" Découvrez mon tutoriel précédent: Introduction au framework Yii, qui passe en revue les avantages de Yii et inclut un aperçu des nouveautés de Yii 2.0, publiées en octobre 2014.

Dans cette série Comment programmer avec Yii2, je guide les lecteurs dans l'utilisation du framework Yii2 pour PHP. Dans ce tutoriel, je vais vous expliquer les bases du téléchargement de fichiers et d’images dans Yii2..

Pour ces exemples, nous allons continuer à imaginer que nous construisons un cadre pour la publication de mises à jour de statut simples, par exemple. notre propre mini-Twitter. L'image ci-dessus montre comment écrire une courte mise à jour lors du téléchargement d'une photo du Taj Mahal que j'ai prise..

Juste un rappel, je participe aux commentaires ci-dessous. Je suis particulièrement intéressé si vous avez des approches différentes, des idées supplémentaires ou si vous souhaitez suggérer des sujets pour de futurs tutoriels. Si vous avez une question ou une suggestion de sujet, veuillez poster ci-dessous. Vous pouvez également me joindre directement sur Twitter @reifman.

Plugins de téléchargement de fichiers

Il existe deux plugins de téléchargement de fichiers pour Yii2 qui semblent les plus robustes:

Le widget FileInput de Kartik Visweswaran (illustré ci-dessus)
2Amigos BlueImp File Uploader (un wrapper pour BlueImp JQuery File Uploader)

Pour ce tutoriel, j'ai décidé de continuer avec le plugin de Kartik. Je l'ai trouvé plus facile à utiliser et mieux documenté que le plugin 2Amigos. Toutefois, BlueImp File Uploader dispose de fonctionnalités d’expérience utilisateur intrigantes que vous voudrez peut-être explorer (voir ci-dessous):

Travailler avec le plugin FileInput

Commençons par installer et utiliser le programme de téléchargement de fichiers et l'intégrer dans notre applet de création de statut similaire à Twitter. Encore une fois, nous allons utiliser l’arbre d’application Yii2 Hello que vous pouvez télécharger en cliquant sur le lien correspondant au bouton GitHub situé en dessous ou au-dessous.

Installer le plugin

Tout d'abord, nous pouvons utiliser compositeur pour ajouter kartik-v / yii2-widget-fileinput à notre application:

$ composer require kartik-v / yii2-widget-fileinput "*" ./composer.json a été mis à jour Chargement des référentiels de compositeur avec les informations de paquet Mise à jour des dépendances (y compris require-dev) - Mise à jour de kartik-v / yii2-widget-fileinput (dev -master 36f9f49 => v1.0.4) Extraction de 36f9f493c2d814529f2a195422a8af2e020fc80c Écriture d’un fichier de verrouillage Génération de fichiers à chargement automatique

Développer la table d'état

Ensuite, nous devons ajouter des champs pour le fichier que nous allons télécharger dans notre table Statut. Dans cet exemple, nous allons permettre à l'utilisateur de télécharger une image pour accompagner sa mise à jour de statut..

Les champs que nous ajouterons concernent le nom de fichier d'origine des fichiers téléchargés, ainsi qu'un nom de fichier unique qui sera stocké sur notre serveur pour l'affichage:

image_src_filename
image_web_filename

Créez une nouvelle migration pour ajouter ces champs à la table Status:

$ ./yii migrate / create extend_status_table_for_image Outil de migration Yii (basé sur Yii v2.0.6) Créer une nouvelle migration '/Users/Jeff/Sites/hello/migrations/m160316_201654_extend_status_table_for_image_php'? (oui | non) [non]: oui Nouvelle migration créée avec succès.

Voici la migration personnalisée pour ajouter les deux champs sous forme de chaînes:

db-> nomDuPort === 'mysql') $ tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE = InnoDB';  $ this-> addColumn ('% status', 'image_src_filename', Schema :: TYPE_STRING. 'NOT NULL'); $ this-> addColumn ('% status', 'image_web_filename', Schema :: TYPE_STRING. 'NOT NULL');  public function down () $ this-> dropColumn ('% status', 'image_src_filename'); $ this-> dropColumn ('% status,' image_web_filename '); retourne faux;

Ensuite, lancez la migration:

$ ./yii migrate / up Outil de migration Yii (basé sur Yii v2.0.6) Total 1 nouvelle migration à appliquer: m160316_201654_extend_status_table_for_image Appliquer la migration ci-dessus? (yes | no) [no]: yes *** application de m160316_201654_extend_status_table_table_for_image> ajouter une colonne image_src_filename chaîne NOT NULL à la table % status… done (heure: 0.044s)> ajouter une colonne image_web_filename chaîne NON NULL à la table % status… done (heure: 0.011s) *** appliqué m160316_201654_extend_status_table_for_image (heure: 0.071s) Migration réussie.

Étant donné que Yii2 est construit avec une architecture MVC (Model View Controller), trois autres zones de codage doivent être implémentées pour le programme de téléchargement de fichiers:

Le modèle de statut
La vue d'état et le formulaire
Le contrôleur de statut

Amélioration de la fonctionnalité du modèle

Maintenant, nous allons apporter des modifications à la /models/Status.php fichier. En premier lieu, nous devons fournir des attributs et des règles de validation pour les nouveaux champs d’image, ainsi que pour les champs temporaires. $ image variable que le widget utilisera pour télécharger le fichier.

Ci-dessous, nous ajoutons des commentaires pour les deux nouveaux $ image_xxx_filename les variables et créer une variable temporaire publique appelée $ image:

/ ** * Il s'agit de la classe de modèle pour la table "status". * * @ propriété property $ id * @ propriété Property $ message * @ propriété Property $ permissions * @ propriété propriété $ image_src_filename * @ propriété property $ image_web_filename * @property integer $ created_at * @property integer $ updated_at * @property integer $ created_by * * @property Utilisateur $ createdBy * / class Le statut s'étend \ yii \ db \ ActiveRecord const PERMISSIONS_PRIVATE = 10; const PERMISSIONS_PUBLIC = 20; image publique $;

Ensuite, nous allons ajouter des règles de validation pour notre image, telles que le type de fichier et la taille maximale:

règles de fonction publique () return [[['' message '],' requis '], [[' 'message'], 'chaîne'], [['autorisations', 'created_at', 'updated_at', 'created_by'] , 'entier'], [['image'], 'safe'], [['' image '],' fichier ',' extensions '=>' jpg, gif, png '], [[' image ']], 'file', 'maxSize' => '100000'], [['image_src_filename', 'image_web_filename'], 'string', 'max' => 255],];

Et de nouvelles étiquettes d'attributs pour les vues:

 fonction publique attributLabels () return ['id' => Yii :: t ('app', 'ID'), 'message' => Yii :: t ('app', 'Message'), 'permissions' = > Yii :: t ('app', 'Autorisations'), 'image_src_filename' => Yii :: t ('app', 'Nom de fichier'), 'image_web_filename' => Yii :: t ('app', 'Nom de chemin '),' created_by '=> Yii :: t (' app ',' Créé par '),' created_at '=> Yii :: t (' app ',' Créé à '),' updated_at '=> Yii: : t ('app', 'Mis à jour à'),];

Nous pouvons maintenant passer à l'affichage des modifications dans le formulaire ActiveModel..

Ajout de notre fonctionnalité d'affichage et de formulaire

Intégration du téléchargement d'images au formulaire de création de statut

Pour permettre l’intégration de formulaire de téléchargement d’image dans les mises à jour de statut (voir ci-dessus), nous devons modifier les paramètres. /views/status/_form.php fichier.

Premièrement, nous incluons le kartik \ file \ FileInput widget situé près du haut et mettez à jour le formulaire pour le transformer en plusieurs parties, qui prend en charge la publication de fichiers:

  ['enctype' => 'multipart / form-data']]); // important?>

Ensuite, entre le champ Autorisations et les boutons Soumettre, nous ajoutons le widget FileInput:

field ($ model, 'permissions') -> dropDownList ($ model-> getPermissions (), ['prompt' => Yii :: t ('app', '- Choisissez vos permissions -')])?>

field ($ model, 'image') -> widget (FileInput :: classname (), ['options' => ['accepter' => 'image / *'], 'pluginOptions' => ['allowedFileExtensions' => ['jpg', 'gif', 'png'], 'showUpload' => false,],]); ?>

isNewRecord? Yii :: t ('app', 'Create'): Yii :: t ('app', 'Update'), ['class' => $ model-> isNewRecord? 'btn btn-success': 'btn btn-primary'])?>

dans le pluginOptions ligne, nous limitons les types de fichiers aux formats d'image courants tels que jpg.

Une fois terminé, cela ressemblera à quelque chose comme ceci, en attendant que l'utilisateur ajoute une image:

Affichage de l'image

Je vais aussi ajouter du code pour afficher l'image téléchargée pour plus tard (après avoir terminé le support du contrôleur).

Tout d'abord, je l'ajouterai à la page de visualisation Statut (/views/status/view.php), qui est très basique. Cependant, je vais afficher l'image ci-dessous les détails de l'article:

 $ modèle, 'attributs' => ['id', 'createdBy.email', 'message: ntext', 'permissions', 'image_web_filename', 'image_src_filename', 'created_at', 'updated_at',],])? > image_web_filename! = ") echo '
'; ?>

Cela ressemblera à ceci:

Nous allons également ajouter une petite vue miniature à notre page d'index d'état (/views/status/index.php). J'ai ajouté un attribut de colonne personnalisé au widget GridView de Yii2:

 $ dataProvider, 'filterModel' => $ searchModel, 'columns' => [['class' => 'yii \ grid \ SerialColumn'], 'id', 'message: ntext', 'permissions', 'created_at', ['attribut' => 'Image', 'format' => 'raw', 'valeur' => function ($ model) if ($ model-> image_web_filename! = ") return"; sinon, retourne 'no image';,], ['class' => 'yii \ grid \ ActionColumn', 'template' => ' view update delete ',' buttons '=> [' view '=> function ($ url, $ model) return Html :: a ('',' status /'.$ model-> slug, ['title' => Yii :: t ('yii', 'View'),]); ],],],]); ?>

En fin de compte, cela ressemblera à ceci:

Construire le support du contrôleur

Pour rendre tout ce qui précède possible, nous devons terminer l'intégration du contrôleur..

Au sommet de /controllers/StatusController.php, nous devons inclure yii \ web \ UploadedFile:

Ensuite, nous devons mettre à jour le actionCréer une fonction:
fonction publique actionCreate () $ model = new Status (); if ($ model-> load (Yii :: $ app-> request-> post ())) $ image = UploadedFile :: getInstance ($ model, 'image'); if (! is_null ($ image)) $ model-> image_src_filename = $ image-> nom; $ ext = end ((explode (".", $ image-> nom))); // génère un nom de fichier unique pour éviter les noms de fichiers en double $ model-> image_web_filename = Yii :: $ app-> security-> generateRandomString (). ". $ ext"; // le chemin pour enregistrer le fichier, vous pouvez définir un uploadPath // dans Yii :: $ app-> params (comme utilisé dans l'exemple ci-dessous) Yii :: $ app-> params ['uploadPath'] = Yii :: $ app -> basePath. '/ web / uploads / status /'; $ path = Yii :: $ app-> params ['uploadPath']. $ model-> image_web_filename; $ image-> saveAs ($ path);  if ($ model-> save ()) return $ this-> redirect (['view', 'id' => $ model-> id]);  else var_dump ($ model-> getErrors ()); mourir();  return $ this-> render ('create', ['model' => $ model,]); 
Essentiellement, cela effectue les opérations suivantes:
 Nous capturons le nom de fichier d'origine à partir des informations de formulaire du fichier téléchargé (image_src_filename).
 Nous générons un nom de fichier unique pour notre serveur (image_web_filename).
 Nous sauvegardons le fichier dans notre répertoire de téléchargement (/ web / uploads / status /).
 Nous sauvons le modèle.
 Nous redirigeons vers la page de vue améliorée.
 
Vous pouvez voir les résultats finaux avec l'image ci-dessus, qui comprend une image du Taj Mahal.
Le widget de saisie de fichiers de Kartik propose également des configurations plus avancées qu'il documente assez bien, telles que le glisser-déposer:
Consultez d'autres de ces pages dans les pages suivantes:
 Démo du widget FileInput
 Télécharger un fichier dans Yii 2 à l'aide du widget FileInput
  Chargement avancé à l'aide du widget Yii2 FileInput 
 
Et après?
J'espère que cela vous aidera avec les bases du téléchargement de fichiers dans votre application Yii2. Si vous souhaitez voir une autre présentation similaire de ce type de fonctionnalité, consultez Construction de votre démarrage avec PHP: Paramètres utilisateur, images de profil et détails de contact. Ce tutoriel offre une intégration légèrement différente de celle de ce tutoriel: utiliser des onglets, mettre à jour les profils utilisateur et redimensionner les images..
Surveillez les prochains tutoriels de ma série Comment programmer avec Yii2 pendant que je continue à plonger dans différents aspects du cadre. Vous pouvez également consulter ma série Construire votre démarrage avec PHP, qui utilise le modèle avancé de Yii2 pour créer une application réelle..
Si vous souhaitez savoir quand le prochain tutoriel Yii2 arrive, suivez-moi @reifman sur Twitter ou consultez ma page d'instructeur. Ma page d’instructeur comprendra tous les articles de cette série dès leur publication.. 
Liens connexes
Voici une variété de liens que j'ai utilisés pour rechercher et écrire ce tutoriel:
  Yii2 Developer Exchange, mon site de ressources Yii2
 FileInput Widget Demo par - Kartik
 Télécharger un fichier dans Yii 2 à l'aide du widget FileInput - Kartik
 Code pour kartik-v / yii2-widget-fileinput (GitHub)
 BlueImp JQuery File Upload Demo
  Code pour 2 amigos/yii2-file-upload-widget: Widget de téléchargement de fichier BlueImp (Github)
 Téléchargement de fichiers - Le guide définitif pour Yii 2.0
 



		
			
	   
	




Code