新澳门萄京娱乐场laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子_php实例_脚本之家

新澳门萄京娱乐场 39

首先先看下效果图

Insus.NET在ASP.NET
MVC专案中,实现了图片管理,上传,预览,显示,删除等功能,还差一个功能,就是更新图片的功能,那这次来完成它。你可以先参考前2篇
《ASP.NET
MVC图片管理(上传,预览与显示)新澳门萄京娱乐场,》 和
《ASP.NET
MVC图片管理(删除)》 。我们也是在这些基础上进行完善的。

这是添加的时候 可以上传照片

在数据库中创建更新存储过程:

这是编辑的时候 可以修改照片

新澳门萄京娱乐场 1

代码部分:

新澳门萄京娱乐场 2新澳门萄京娱乐场 3

先看控制器:

-- =============================================
-- 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
/*** * 添加商户 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View */ public function add() { $data = null; return _view('admin.merchant.merchant.edit', compact; } /*** * 添加商户 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View */ 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

** * 调用的文件中需要 use Illuminate\Support\Facades\Input; Illuminate\Support\Facades\Storage; * 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也提供几种方法来实现,你择优而参考。
第一种是按普通方式,是在另外一个视图更新,也就是说,我们点击链接,转向另外一个视图进行更新,更新完毕,转回原始页。

接下来是编辑时候 显示已经上传的图片 并且可以进行修改:

由于在编辑的视图中,还想显示这笔记录的信息,因此我们把这笔记录搜索出来。还需得写另外一个存储过程:
新澳门萄京娱乐场 5

   {{ 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

编辑这边 的控制器代码是:

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
/*** * 添加图片 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View */public function add_img(){ $data = null; return _view('admin.merchant.merchant.add', compact;} /*** * 保存图片 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View */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

以上这篇laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

我们应该养成一个习惯,有添删除存储过程,Entity类也应该有相应修改:
新澳门萄京娱乐场 8

上面获取单笔记录,是在编辑视图加载时,也把此笔记录显示出来。
好了,我们可以创建控制的视图Action了:

 新澳门萄京娱乐场 9

上面#109行代码,有一个方法,它是将DataRow数据行转换为对象,以本例,它就是ImageStore对象。方法详细,可参考下面:
新澳门萄京娱乐场 10

创建一个Edit视图:
新澳门萄京娱乐场 11
 

现在我需要回至前些天好的页面ImageManagement.cshtml的数据显示做编辑链接:
新澳门萄京娱乐场 12

 

现在来运行上面的程序,看看效果:

新澳门萄京娱乐场 13

结查还行。现在在Edit视图添加图片编辑功能,首先去数据创建更新的存储过程:
新澳门萄京娱乐场 14

修改MVC程序的实体Entity:
新澳门萄京娱乐场 15

修改控制器,添加一个更新的操作:
新澳门萄京娱乐场 16

 

在视图Edit中,添加文件上传与更新功能:
新澳门萄京娱乐场 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

 

本篇就列举两个例子算了,第三种更新方式,得需另起一篇,因为本篇已经太长了。
两种方式,各有所长,各有所短。你自己选择之。其中有出现异常处理方法,也许还有很不完美,但可以优化之。

 

发表评论

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