金沙国际唯一官网网址 39

未分类

【www.2979.com】yii2.0-ueditor下载路线,预览与浮现卡塔尔(قطر‎

13 3月 , 2020  

率先先看下效果图

Insus.NET在ASP.NET
MVC专案中,达成了图片管理,上传,预览,展现,删除等职能,还差一个效应,便是翻新图片的功用,那此次来成功它。你能够先仿照效法前2篇
金沙国际唯一官网网址 ,ASP.NET
MVC图片管理(上传,预览与呈现卡塔尔(قطر‎》 和
《ASP.NET
MVC图片管理(删除卡塔尔》 。咱们也是在此些底蕴上实行宏观的。

今日在英特网看了下有关图片上传的教程,历经波折才调节和测量试验好,今后把相关代码及其表明贴出来,以供初次使用的爱人们参谋。

那是丰富的时候 能够上传照片

【www.2979.com】yii2.0-ueditor下载路线,预览与浮现卡塔尔(قطر‎。在数据库中创立立异存款和储蓄进程:

www.2979.com ,yii2.0-ueditor下载路线:yii2-ueditor-jb51.rar

这是编写制定的时候 能够修改照片

金沙国际唯一官网网址 1

1.下载yii2-ueditor2.将下载的yii2-ueditor-master 校订 ueditor
(注意:改过成此外文件名请改良插件内相应的命名空间卡塔尔国3.将文件方在
根目录/common/widgets 下就能够

代码部分:

金沙国际唯一官网网址 2金沙国际唯一官网网址 3

在backend/controllers中新建二个调节器德姆o加入以下代码

先看调整器:

-- =============================================
-- Author:        Insus.NET
-- Create date: 2015-07-09
-- Description:    Update image.
-- =============================================
CREATE PROCEDURE [dbo].[usp_ImageStore_Update]
(
    @ImageStore_nbr INT,
    @Name [nvarchar](50),
    @MimeType [nvarchar](50),
    @Content [image]
)
AS
UPDATE [dbo].[ImageStore] SET [Name] = @Name,[MimeType] = @MimeType,[Content] = @Content 
WHERE [ImageStore_nbr] = @ImageStore_nbr
GO
public function actions(){ return [ 'ueditor'=>[ 'class' => 'commonwidgetsueditorUeditorAction', 'config'=>[ //上传图片配置 'imageUrlPrefix' => "", /* 图片访问路径前缀 */ 'imagePathFormat' => "/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ ] ] ];}
/*** * 添加商户 * @return IlluminateContractsViewFactory|IlluminateViewView */ public function add() { $data = null; return _view('admin.merchant.merchant.edit', compact; } /*** * 添加商户 * @return IlluminateContractsViewFactory|IlluminateViewView */ public function store(StoreMenchantRequest $request) { //判断手机号是否重复 重复不能添加 //后面开发可能会去掉这个判断 $merchant = Merchant::where('mobile', $request->mobile)->first(); if  { return back()->withErrors; } $token = str_random; $api_token = $this->getToken; $newMerchantData = [ 'mobile' => $request->mobile, 'api_token' => $api_token, ]; DB::beginTransaction(); $newMerchant = Merchant::create; $newData = [ 'merchant_id' => $newMerchant->id,//Merchantid 'merchant_principal' => $request->merchant_principal,//负责人 'merchant_name' => $request->merchant_name,//商家名称 'merchant_short_name' => $request->merchant_short_name,//商家简称 'merchant_address' => $request->merchant_address,//商家地址 'business_num' => $request->business_num,//注册号 'business_address' => $request->business_address,//营业地址 'business_name' => $request->business_name,//营业执照名称 'business_person' => $request->person,//营业执照法人 'identity_name' => $request->person,//身份证姓名 'identity_num' => $request->identity_num,//身份证号 ]; //上传缩略图 $input = $request->all(); if  && is_object { $file_name = save_image_file($input['file'], 'merchant_infos'); if  { return back()->with; }// dd; $input['thumbnail'] = $file_name; unset; unset; } else { return back()->with; } //上传内景图1 if (isset && is_object { $file_name_1 = save_image_file($input['image1'], 'merchant_infos'); if  { return back()->with; } $input['interior_figure_one'] = $file_name_1; unset; unset; } else { return back()->with; } //上传内景图2 if (isset && is_object { $file_name_2 = save_image_file($input['image2'], 'merchant_infos'); if  { return back()->with; } $input['interior_figure_two'] = $file_name_2; unset; unset; } else { return back()->with; } //上传内景图3 if (isset && is_object { $file_name_3 = save_image_file($input['image3'], 'merchant_infos'); if  { return back()->with; } $input['interior_figure_three'] = $file_name_3; unset; unset; } else { return back()->with; } $merchantInfo = MerchantInfo::where('merchant_id', $newMerchant->id)->first(); if ) { return back()->withErrors; } $homestayInfo = HomestayInfo::where('merchant_id', $newMerchant->id)->first(); if ) { return back()->withErrors; } //录入商户信息 $newData['thumbnail'] = $input['thumbnail']; $newData['interior_figure_one'] = $input['interior_figure_one']; $newData['interior_figure_two'] = $input['interior_figure_two']; $newData['interior_figure_three'] = $input['interior_figure_three']; $newData['content'] = $input['content']; $newMerchantInfo = MerchantInfo::create; $newHomestayInfo = HomestayInfo::create; if ($newMerchantInfo && $newHomestayInfo && $newMerchant) { DB::commit(); admin_action_logs($newMerchant, "添加商户成功"); return redirect()->route('admin.merchant.index')->with; } else { DB::rollback->withErrors; } }

View Code

首先种调用方式:

这边封装了叁个上传图片的法子,调用就能够

在实业Entity类ImageStoreEntity.cs增多叁个更新方法,为调整器服务:
金沙国际唯一官网网址 4

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

** * 调用的文件中需要 use IlluminateSupportFacadesInput; IlluminateSupportFacadesStorage; * save_image_file 保存图片文件 ,存在Storage::disk 目录下 * @var $file object 上传的图片文件,具体是在 request 中的 UploadedFile 类型的对象 * @var $prefix_name string 可选保存的文件名前缀 * @var $path string 文件路径 * @return bool/string 如果通过验证 则返回在新的文件名 */if (!function_exists { function save_image_file(&$file, $prefix_name = '', $path = 'serve') { $file = isset ? $file : null; if ($file != null && $file->isValid { // 获取文件相关信息 $originalName = $file->getClientOriginalName(); // 文件原名 $ext = $file->getClientOriginalExtension; $file->getClientOriginalName(); if ($ext == "" && $file->getClientOriginalName { $ext = 'png'; } if (!preg_match('/jpg|png|gif$/is', $ext)) { return false; } //dd; $realPath = $file->getRealPath(); //临时文件的绝对路径 $type = $file->getClientMimeType(); // image/jpeg // 上传文件 $filename = $prefix_name . '-' . date . '-' . uniqid() . '.' . $ext; //dd; $bool = Storage::disk->put($filename, file_get_contents; if  return false; return $filename; } return false; }}

 
在更新作用方面,Insus.NET也提供两种办法来兑现,你选择优秀者而参照他事他说加以调查。
率先种是按平常方式,是在其它三个视图更新,也正是说,大家点击链接,转向其它一个视图实行改善,更新完结,转回原始页。

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

接下去是编辑时候 呈现已经上传的图样 并且能够开展改动:

由于在编写的视图中,还想展示那笔记录的音信,因而大家把那笔记录搜索出来。还需得写其它一个存款和储蓄进程:
金沙国际唯一官网网址 5

options 填写配置编辑器的参数

   {{ Form::open(['method'=>'post','route' => ['admin.merchant.add_img_store'],'enctype'=>'multipart/form-data']) }} 商户图片       * 缩略图: :   @if  @else  @endif           * 内景图1: :   @if  @else  @endif           * 内景图2: :   @if  @else  @endif           * 缩略图3: :   @if  @else  @endif          编辑商户  {{ Form::close() }}  

金沙国际唯一官网网址 6金沙国际唯一官网网址 7

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

编排那边 的调节器代码是:

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:        Insus.NET
-- Create date: 2015-07-09
-- Description:    get record data by primary key.
-- =============================================
CREATE PROCEDURE [dbo].[usp_ImageStore_GetByPrimaryKey]
(
    @ImageStore_nbr INT
)
AS
SELECT [ImageStore_nbr],[Name],[MimeType],[Content] FROM [dbo].[ImageStore] WHERE [ImageStore_nbr] = @ImageStore_nbr
GO

yii2框架整合了百度编辑器,因为文件上传选取的是yii2自带的UploadedFile,这就免不了umeditor上传不成功难题,消灭难题的只要求三个操作步骤,大家来看看具体落到实处

/*** * 添加图片 * @return IlluminateContractsViewFactory|IlluminateViewView */public function add_img(){ $data = null; return _view('admin.merchant.merchant.add', compact;} /*** * 保存图片 * @return IlluminateContractsViewFactory|IlluminateViewView */public function add_img_store{ //上传缩略图 $input = $request->all(); if  && is_object { $file_name = save_image_file($input['file'], 'merchant_infos'); if  { return back()->with; } $input['thumbnail'] = $file_name; unset; unset; } else { return back()->with; } //上传内景图1 if (isset && is_object { $file_name_1 = save_image_file($input['image1'], 'merchant_infos'); if  { return back()->with; } $input['interior_figure_one'] = $file_name_1; unset; unset; } else { return back()->with; } //上传内景图2 if (isset && is_object { $file_name_2 = save_image_file($input['image2'], 'merchant_infos'); if  { return back()->with; } $input['interior_figure_two'] = $file_name_2; unset; unset; } else { return back()->with; } //上传内景图3 if (isset && is_object { $file_name_3 = save_image_file($input['image3'], 'merchant_infos'); if  { return back()->with; } $input['interior_figure_three'] = $file_name_3; unset; unset; } else { return back()->with; } //录入商户信息 $merchang_info = MerchantInfo::where('merchant_id', '=', $input['id'])->first(); if ) { $newData['thumbnail'] = $input['thumbnail']; $newData['merchant_id'] = $input['id']; $newData['interior_figure_one'] = $input['interior_figure_one']; $newData['interior_figure_two'] = $input['interior_figure_two']; $newData['interior_figure_three'] = $input['interior_figure_three']; $newData['content']=''; $result = MerchantInfo::create; } /* $newData['thumbnail']=$input['thumbnail']; $newData['interior_figure_one']=$input['interior_figure_one']; $newData['interior_figure_two']=$input['interior_figure_two']; $newData['interior_figure_three']=$input['interior_figure_three']; // $newData['content']=$input['content']; $newMerchantInfo = MerchantInfo::create;*/ else { $merchang_info->thumbnail = $input['thumbnail']??''; $merchang_info->interior_figure_one = $input['interior_figure_one']??''; $merchang_info->interior_figure_two = $input['interior_figure_two']??''; $merchang_info->interior_figure_three = $input['interior_figure_three']??''; $result = $merchang_info->save { DB::commit(); admin_action_logs; return redirect()->route('admin.merchant.index')->with; } else { DB::rollback->withErrors; }}

View Code

开创三个 common/models/Upload.php:代码为:

以上那篇laravel完毕图片上传预览,及编辑时可更改图片,并实时变化的例证就是小编分享给我们的全体内容了,希望能给大家四个参阅,也期望我们多都赐教脚本之家。

咱俩理应养成二个习以为常,有添删除存款和储蓄进度,Entity类也相应有料理纠正:
金沙国际唯一官网网址 8

需要在刚刚创建的那个控制器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; } } }

下面获得一笔记录,是在编辑视图加载时,也把此笔记录显示出来。
好了,我们能够创设调整的视图Action了:

专程提示:上述重临的$info消息中state状态只好是SUCCESS,区分朗朗上口写

 金沙国际唯一官网网址 9

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

上面#109行代码,有三个艺术,它是将DataRow数据行调换为目标,以本例,它便是ImageStore对象。方法详细,可参看上面:
金沙国际唯一官网网址 10

当中content是字段名称

创制二个Edit视图:
金沙国际唯一官网网址 11
 

有关图片上传的能够看下:

近年来本身索要回至后天好的页面ImageManagement.cshtml的数码呈现做编辑链接:
金沙国际唯一官网网址 12

在YII2框架中应用UEditor编辑器发表随笔之处:

 

以上就是本文的全体内容,希望对大家的学习抱有助于,也期待我们多都赐教脚本之家。

明天来运维方面包车型地铁次序,看看效果:

金沙国际唯一官网网址 13

结查逼迫能够。现在在艾德it视图增添图片编辑效率,首先去数据创立修正的存款和储蓄进度:
金沙国际唯一官网网址 14

改进MVC程序的实体Entity:
金沙国际唯一官网网址 15

改过调节器,加多八个翻新的操作:
金沙国际唯一官网网址 16

 

在视图Edit中,添Gavin书上传与更改功效:
金沙国际唯一官网网址 17

 

大概做到了,看看运转时的效用,演示中所采纳图片来源Insus.NET的和讯(今日头条,腾讯卡塔尔国和QQ空间:

 金沙国际唯一官网网址 18

嗯,到达想象中的结果。
接下去,大家一个叁个对上边例子中,有何不足或是难题,尽量演讲与解决。先看看上边的末段二个演示,再次回到前一页时,内容须求Refresh之后,才获得最新数据,我们须求在Edit视图中,增加三个回去开关或超链接:

金沙国际唯一官网网址 19

再来看看动态演示:
金沙国际唯一官网网址 20

如此传递参数,客商也能够向来改换参数据,当输入三个一纸空文的主键值时,程序直接抛出拾壹分。
There is no row at position
0.

金沙国际唯一官网网址 21

那是因为数据库根本官样文章那记录,重回空行记录给程序。因而我们抬高叁个决断在调节器中:
金沙国际唯一官网网址 22

 
再来测量检验此外一种情状,假使顾客知道Edit视图,直接访谈,实际不是从ImageManagement视图中链接点击来转向呢?或是删除参数,也会现身万分。

The parameters dictionary contains a
null entry for parameter ‘imageStore_nbr’ of non-nullable type
‘System.Int32’ for method ‘System.Web.Mvc.ActionResult Edit(Int32)’ in
‘Insus.NET.Controllers.July15Controller’. An optional parameter must be
a reference type, a nullable type, or be declared as an optional
parameter.
Parameter name: parameters

看看:
金沙国际唯一官网网址 23

Insus.NET的也不曾较好的点子来消除,可是Insus.NET的不经常的拍卖是安装三个私下认可值给那么些Action操作参数。如下:
金沙国际唯一官网网址 24

鉴于那一个私下认可值,也是数据库中从不的主键值,它依照后边二个当主键值不设有时来拍卖。其实,你还能拉长一个确定,即便顾客一向访谈Edit视图,能够转导向真正源始视图ImageManagement:
金沙国际唯一官网网址 25

好的,还测量检验一下方才纠恰好的代码:
金沙国际唯一官网网址 26

调整器中Edit视图操作代码:

金沙国际唯一官网网址 27金沙国际唯一官网网址 28

 public ActionResult Edit(int imageStore_nbr = 0)
        {
            if (Request.QueryString["imageStore_nbr"] == null)
                return RedirectToAction("ImageManagement");

            ImageStore objIS = new ImageStore();

            ImageStoreEntity ise = new ImageStoreEntity();
            DataTable dt = ise.GetRecordByPrimary(imageStore_nbr);

            if (dt.Rows.Count > 0)
            {
                DataRow dr = dt.Rows[0];
                DataTableUtility.DataRow2Object(dr, objIS);
                return View(objIS);
            }
            else
            {
                ContentResult cr = new ContentResult();
                cr.Content = "不存在或错误的主键值。";
                cr.ContentType = "text/plain";
                cr.ContentEncoding = System.Text.Encoding.UTF8;
                return cr;
            }
        }

View Code

第三种更新方法,是在同一个视图,上传标签或许与丰盛功用共用一个。为了分歧前边的操作方法,在调控器中,增加其余二个Action:
金沙国际唯一官网网址 29

 在视图Razor动态产的table中,增多三个列,在数量发生的行中,已毕一个编写制定铵钮:
金沙国际唯一官网网址 30

 

在form中,还亟需增多多个铵钮,一个是翻新,叁个撤消,还也许有二个原来标签必要更正,如下:
金沙国际唯一官网网址 31

地方标志1,给form1增添叁本性格id,是为着稍后大家在jQuery代码,动态改进form的Action名称。

标记2,增添三个html隐藏标签,是为着存款和储蓄记录的主键值。

标记3,给原本submit标签增加贰个id属性。

标识4与5,分别加多三个更新与撤废html标签铵钮,它们初阶状态是禁止使用了。也正是说一最初客户是无法点击的。

好了,以后大家必要各自完结那么些3个铵钮的事件,先是编辑

金沙国际唯一官网网址 32

 

地点代码示例了,标记1是当客商点击某行编辑的铵钮时,即时禁止使用当前的铵钮。
标记2,为隐讳标签赋值。
标识3,是启用更新与撤销铵钮,照旧增多上传铵钮禁止使用。

下边是撤除铵钮jQuery事件:
金沙国际唯一官网网址 33

当撤销时,大家要求动态去校正form的action值,改为丰裕上传的action。
还要把客户点击编辑的铵钮状态由禁止使用改为启用。

第#95至#97行代码是把上传铵钮的状改为启用。撤除与更新铵钮改为禁止使用。

再有三个铵钮,是翻新铵钮事件:
金沙国际唯一官网网址 34

代码达成了,测量试验一下职能:

 金沙国际唯一官网网址 35

 

地点测量检验中,现身一些小标题,就是撤除时,编辑铵钮状态并从未由禁止使用改为启用。大家改正正一下代码:
金沙国际唯一官网网址 36

 

上边大家Review一下大家写好的前后相继,在调节器,由于应用了几个创新,有代码冗余:
金沙国际唯一官网网址 37

上边高亮部分代码均是冗余的,我们得以重构二个艺术:
金沙国际唯一官网网址 38

 
重构成上面那样子:
金沙国际唯一官网网址 39

 

本篇就罗列三个例证算了,第三种更新情势,得需另起一篇,因为本篇已经太长了。
两种方法,连镳并轸,各有所短。你自个儿选拔之。此中有现身分外管理措施,可能还会有非常不圆满,但足以优化之。

 


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图