參考網頁:php
用戶點擊朋友圈,能夠選擇更改頭像。彈出對話框,選擇頭像。爲簡便,不增長剪切等功能,只提供在線更換,不提供上傳功能。這個就是用於修改頭像的。git
$ php composer.phar require bupy7/yii2-gridify-view "dev-master"
$ php composer.phar require kartik-v/yii2-dialog "*"
其中,第二項,可能須要安裝附加插件。在開發網站的時候,不少插件已經安裝上了,遇到不能解決的問題,歡迎在下面留言。github
對於照片顯示,須要一個可以訪問的地址,爲了訪問這些照片,把這些照片做爲公開的,不加權限的,能夠任意訪問。本文頁面採用的 AdminLTE,因此在這個基礎上繼續本教程,若有不能繼續,請等待頁面設計博客的出現,致歉。web
假設你已經安裝 https://github.com/dmstr/yii2-adminlte-asset 的 AdminLTE。本文的照片均放在 ./vendor/almasaeed2010/adminlte/dist/img/ 裏。bash
分爲 MVC 三部分來講。先說 C Controller。假設用的是 UserControlleryii2
代碼見於 ./frontend/controllers/UserController.phpsession
/** * change avatar for current user. * @param string $avatar * @return mixed */ public function actionChangeAvatar($avatar = null) { if ($avatar != null) { $me = Yii::$app->user->identity; $me->avatar = $avatar; if ($me->save()) { Yii::$app->session->setFlash('success', '您成功設置這張圖片爲頭像!'); } else { Yii::$app->session->setFlash('error', '您頭像設置失敗!'); } return $this->render('_avatar', [ 'model' => $avatar, ]); } $id = Yii::$app->user->id; $dir = "@vendor/almasaeed2010/adminlte/dist/img/"; $files = scandir(BaseYii::getAlias($dir)); $dataProvider = new ArrayDataProvider([ 'allModels' => $files, ]); if (Yii::$app->request->isAjax) { return $this->renderPartial('_changeavatar', [ 'dataProvider' => $dataProvider, 'onlyItems' => true, ]); } return $this->render('changeavatar', [ 'dataProvider' => $dataProvider, 'model' => $this->findModel($id), ]); }
解釋:app
if (Yii::$app->request->isAjax) {
是爲了自動加載的。changeavatar
,_changeavatar
,_avatar
該V views 頁面位於 ./frontend/views/user/ 下,composer
//changeavatar.php <?php use yii\helpers\Html; /* @var $this yii\web\View */ /* @var $model common\models\User */ $this->title = $model->username; $this->params['breadcrumbs'][] = ['label' => '朋友圈', 'url' => ['index']]; $this->params['breadcrumbs'][] = $this->title; echo $this->render('_changeavatar', [ 'dataProvider' => $dataProvider, ]);
另一個代碼爲frontend
//_changeavatar.php <?php use bupy7\gridifyview\GridifyView; echo GridifyView::widget([ 'dataProvider' => $dataProvider, 'itemView' => '_avatar', 'onlyItems' => isset($onlyItems) ? $onlyItems : false, 'pluginOptions' => [ 'url' => ['change-avatar'], 'srcNode' => '> div', 'resizable' => true, 'width' => '250px', 'maxWidth' => '350px', 'margin' => '20px', ], ]);
其中還有一個小頁面 _avatar.php
//_avatar.php <?php use kartik\dialog\Dialog; use yii\helpers\Url; if ($model == '.' or $model == '..') { return; } $directoryAsset = Yii::$app->assetManager->getPublishedUrl('@vendor/almasaeed2010/adminlte/dist/'); $url = Url::to(['change-avatar', 'avatar' => $model]); $btns = <<< HTML <a type="button" href=$url> <img src="$directoryAsset/img/$model" alt="沒有頭像"/> </a> HTML; echo $btns;
解釋:
$model
是 string
類型,這是由 Controller 裏 ArrayDataProvider
和 $files
決定的。$directoryAsset
是照片公開的文件夾。本文采用的 common/models/User.php
,爲之添加一個 avatar
屬性,char
類型,用於保存照片名字。
該功能實現的思路,主要是照着示例作,中間的難點是沒有考慮到 _avatar.php
中 $modle
是 string
。在 Controller 裏爲了區分不一樣的頁面,使用 $avatar=null
來判斷,不是很嚴格。