您的位置:澳门新葡萄京娱乐网站 > 编程知识 > yii2-图片上传扩张(异步加载缩略图)

yii2-图片上传扩张(异步加载缩略图)

2019-12-22 01:39

上述正是本文的全体内容,希望对我们的学习抱有利于,也冀望大家多多点拨脚本之家。

在对应的渲染页面,即views下的页面中

1.点击上边扩张下载下载扩展

创设二个 common/models/Upload.php:代码为:

Paste_Image.png

<?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'label_img')->widget('commonwidgetsfile_uploadFileUpload',[
        'config'=>[
            //图片上传的一些配置,不写调用默认配置
            'domain_url' => 'http://www.yii-china.com',
        ]
    ]) ?>
<?php ActiveForm::end(); ?>

至于图片上传的能够看下:

安装格局:
1.下载yii2-ueditor
2.将下载的yii2-ueditor-master 纠正 ueditor (注意:改正成任何文件名请校勘插件内相应的命名空间卡塔尔国
3.将文件方在 根目录/common/widgets 下就可以

能源下载:
恢宏下载(yii2.0-ueditor)
框架下载(Yii 2.0.6 高级版)
描述:
最棒适用于yii2.0 高档版(advanced)应用框架,对于功底板(basic)及此外框架要修正对应的命名空间就可以使用

public function actions(){ return [ 'ueditor'=>[ 'class' => 'commonwidgetsueditorUeditorAction', 'config'=>[ //上传图片配置 'imageUrlPrefix' => "", /* 图片访问路径前缀 */ 'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ ] ] ];}

options 填写配置编辑器的参数(参照他事他说加以考查ueditor官方网站)

1445840821193467.png

前几日在网络看了下关于图片上传的学科,历经曲折才调节和测量检验好,现在把有关代码及其表达贴出来,以供初次使用的相爱的大家参照他事他说加以考察。

其次种调用情势:

异步加载缩略图.png

特别提示:上述再次回到的$info消息中state状态只可以是SUCCESS,区分朗朗上口写

科学普及难题:
1.图纸上传提醒“后端配置项尚未平常加载,上传插件不可能健康使用”
a.首先肯定一下是或不是为新型的插件源码
b.比方:如在SiteController中布置的该插件,确认site/ueditor是还是不是有权力访问
c.同上例子,明显site/ueditor是还是不是能用get情势访谈

2.在行使图片上传控件的调节器(controller)中,参与以下代码

['initialFrameWidth' => 850,]])?>

图片 1

图片 2

field->textInput(['maxlength' => true]) ?>field->widget('commonwidgetsueditorUeditor',[ 'options'=>[ 'initialFrameWidth' => 850, ]]) ?> ...
<?=commonwidgetsueditorUeditor::widget(['options'=>['initialFrameWidth' => 850,]])?>

安装扩充:

在对应的渲染页面,即views下的页面中

调用方法:
在rootPath/backend/controllers中新建八个调节器插手以下代码

第二种:带model

 field->widget('commonwidgetsueditorUeditor',[ 'options'=>[ 'initialFrameWidth' => 1050,//宽度 'initialFrameHeight' => 550,//高度 ] ]) ?>  'btn btn-success']) ?> 

第意气风发种调用格局:

第一种:不带model

yii2框架整合了百度编辑器,因为文件上传接受的是yii2自带的UploadedFile,那就在所无免umeditor上传不成事难题,解决难点的只须求八个操作步骤,大家来探望实际落成

<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'content')->widget('commonwidgetsueditorUeditor',[
    'options'=>[
        'initialFrameWidth' => 850,
    ]
]) ?>

  ...

<?php ActiveForm::end(); ?>

图片 3

需要在刚刚创建的那个控制器Demo里添加actionUploadImage方法处理“富文本框的图片上传”内容use yiiwebUploadedFile;use commonmodelsUpload;/** * 富文本框的图片上传 * @return array */ public function actionUploadImage() { $model = new Upload(); if (Yii::$app->request->isPost) { $model->file = UploadedFile::getInstance; $dir = '/uploads/ueditor/';//文件保存目录 if  mkdir; if  { $fileName = $model->file->baseName . "." . $model->file->extension; $dir = $dir."/". $fileName; $model->file->saveAs; $info = [ "originalName" => $model->file->baseName, "name" => $model->file->baseName, "url" => $dir, "size" => $model->file->size, "type" => $model->file->type, "state" => "SUCCESS", ]; exit; } } }

财富下载:
增添下载(yii2.0-ueditor)
框架下载(Yii 2.0.6 高级版)
描述:
至上适用于yii2.0 高等版(advanced)应用框架,对于底子板(basic)及任何框架要更改对应的命名空间就能够使用

来自Yii中文网

在YII2框架中动用UEditor编辑器宣布小说之处:

原文:Yii中文网

use commonwidgetsfile_uploadFileUpload;   //引入扩展

echo FileUpload::widget();

echo FileUpload::widget(['value'=>$url]);  //编辑时要带默认图,$url为图片地址

1.下载yii2-ueditor2.将下载的yii2-ueditor-master 改正 ueditor (注意:改善成其余文件名请校勘插件内相应的命名空间卡塔尔(قطر‎3.将文件方在 根目录/common/widgets 下就能够

public function actions(){
    return [
        'ueditor'=>[
            'class' => 'commonwidgetsueditorUeditorAction',
            'config'=>[
                //上传图片配置
                'imageUrlPrefix' => "", /* 图片访问路径前缀 */
                'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
            ]
        ]
    ];
}

接下来重命名叫file_upload放在/common/widgets文件夹中,如下图所示

在backend/controllers中新建贰个调控器Demo参预以下代码

本子相关:
Yii:2.0.6
Ueditor:1.4.3.1 (php版本)

public function actions()
{
    return [
        'upload'=>[
            'class' => 'commonwidgetsfile_uploadUploadAction',     
            'config' => [
                'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}",
            ]
        ]
    ];
}

中间content是字段名称

效果与利益演示:

3.views渲染图片上传分界面有三种办法:

yii2.0-ueditor下载路线:yii2-ueditor-jb51.rar

功用体现:
配置好了后头效果显示:扶持异步加载缩略图

率先种调用方式:

options 填写配置编辑器的参数

本文由澳门新葡萄京娱乐网站发布于编程知识,转载请注明出处:yii2-图片上传扩张(异步加载缩略图)

关键词: