圖片導入的實現

參考網頁:php

設想

用戶點擊朋友圈,能夠選擇更改頭像。彈出對話框,選擇頭像。爲簡便,不增長剪切等功能,只提供在線更換,不提供上傳功能。這個就是用於修改頭像的。git

1、安裝

$ php composer.phar require bupy7/yii2-gridify-view "dev-master"
$ php composer.phar require kartik-v/yii2-dialog "*"

其中,第二項,可能須要安裝附加插件。在開發網站的時候,不少插件已經安裝上了,遇到不能解決的問題,歡迎在下面留言。github

2、使用

對於照片顯示,須要一個可以訪問的地址,爲了訪問這些照片,把這些照片做爲公開的,不加權限的,能夠任意訪問。本文頁面採用的 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

三、views 會有三部分

該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;

解釋:

  • $modelstring 類型,這是由 Controller 裏 ArrayDataProvider$files 決定的。
  • $directoryAsset 是照片公開的文件夾。

四、Model 的實現

本文采用的 common/models/User.php,爲之添加一個 avatar 屬性,char 類型,用於保存照片名字。

3、小結

該功能實現的思路,主要是照着示例作,中間的難點是沒有考慮到 _avatar.php$modlestring。在 Controller 裏爲了區分不一樣的頁面,使用 $avatar=null 來判斷,不是很嚴格。

相關文章
相關標籤/搜索