1. 程式人生 > >Yii2.0-圖片上傳擴充套件(非同步載入縮圖) [擴充套件元件]

Yii2.0-圖片上傳擴充套件(非同步載入縮圖) [擴充套件元件]

資源下載:

擴充套件下載(圖片上傳擴充套件-file_upload)

適用框架:Yii2.0高階版(基礎版使用需要適當修改)

效果展示:

配置好了之後效果展示:支援非同步載入縮圖


安裝擴充套件:

1.點選上面擴充套件下載下載擴充套件

然後重新命名為file_upload放在/common/widgets資料夾中,如下圖所示


2.在使用圖片上傳控制元件的控制器(controller)中,加入以下程式碼

    public function actions()
    {
        return [
            'upload'=>[
                'class' => 'common\widgets\file_upload\UploadAction',     //這裡擴充套件地址別寫錯
                'config' => [
                    'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}",  //圖片儲存位置
                ]
            ]
        ];
    }

3.views渲染圖片上傳介面有兩種方式:

第一種:不帶model

use common\widgets\file_upload\FileUpload;   //引入擴充套件

echo FileUpload::widget();

echo FileUpload::widget(['value'=>$url]);  //編輯時要帶預設圖,$url為圖片地址

第二種:帶model

<?php $form = ActiveForm::begin(); ?>
        
    <?= $form->field($model, 'label_img')->widget('common\widgets\file_upload\FileUpload',[
        'config'=>[
            //圖片上傳的一些配置,不寫呼叫預設配置
            // 'domain_url' => 'http://www.yii-china.com',
        ]
    ]) ?>
<?php ActiveForm::end(); ?>