圖片導入的實現

時間 2019-11-11

標籤圖片導入實現简体版

原文原文鏈接

參考網頁：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

if (Yii::$app->request->isAjax) { 是爲了自動加載的。
整個代碼仿照 https://github.com/bupy7/yii2-gridify-view 示例作的。
有兩個views 頁面，分別 changeavatar,_changeavatar，_avatar

三、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;

解釋：