ASP.NET MVC图片管理(上传,预览与显示)

转载 2015年07月07日 11:25:25

先看看效果(下面gif动画制作有点大,5.71MB):

 

题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)Insus.NET烹饪的晚餐。如果你也想学习烹饪,也可以关注Insus.NET的微博。

言归正传,由于以前的asp.net mvc的练习文件上传文件,显示或是下载等博文,均是存储于站点目录之中。这次练习是把图片存储于数据库。也就是以图片的数据流存储。在上传时我们需要把文件处理为数据库,显示时,我们需要把数据流处理为文件。

一看上面的演示,我们还会看到一个预览区。选择图片时,预览区会预先显示选择图片。确认正确之后,我们再上传至数据库中。

使用下面SQL语句创建表[dbo].[ImageStore],存储过程2个[dbo].[usp_ImageStore_Insert]和[dbo].[usp_ImageStore_GetAll]:

 View Code

 

根据数据表,我们需要在asp.net mvc的models目录中创建一个mode,习惯性是以数据表来创建:



由于我们还要处理程序与数据库之间的交流,创建一个Entity,两个方法,一是获取所有数据,另一个是为添加数据所准备:


上面的Entity中,有两个标记,标记一可以参考这篇:http://www.cnblogs.com/insus/p/4156735.html 。
标记2,Insus.NET有写成一个Utility,也就是说把DataTable转换为List<T>的工具,其实有以前的asp.net mvc也有提及或是代码分享,在此你不必再费时费心去搜索,参考下面代码就是了:


在上面的代码示例中,#35行的方法,是DataTable转换为json序列化,由于本例中并无使用到,即在此略过。

code source:

 View Code


接下来,打开控制器创建两Action,第一个控制是视图操作,我们有把数据传入视图中。而第二个操作,是为处理上传文件方法所服务。


控制器两个Action代码:

复制代码
 public ActionResult ImageManagement()
        {
            ImageStoreEntity ise = new ImageStoreEntity();
            var model = ise.GetAll();
            return View("ImageManagement", model);
        }

        [HttpPost]
        public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> filename)
        {
            foreach (var file in filename)
            {
                if (file.ContentLength > 0)
                {
                    ImageStore imageStore = new ImageStore();

                    imageStore.Name = Path.GetFileName(file.FileName);
                    imageStore.MimeType = file.ContentType;
                                        
                    using (Stream inputStream = file.InputStream)
                    {
                        MemoryStream memoryStream = inputStream as MemoryStream;
                        if (memoryStream == null)
                        {
                            memoryStream = new MemoryStream();
                            inputStream.CopyTo(memoryStream);
                        }
                        imageStore.Content = memoryStream.ToArray();
                    }

                    ImageStoreEntity ise = new ImageStoreEntity();
                    ise.Insert(imageStore);
                }
            }

            return RedirectToAction("ImageManagement");
        }
复制代码


下是完成View视图,在视图中我们先定义表格样式:

复制代码
        div, span, font, a, td {
            font-size: 13px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border-left: 1px solid #aaa;
            border-top: 1px solid #aaa;
            background: #efefef;
        }

        th {
            border-right: 1px solid #888;
            border-bottom: 1px solid #888;
            padding: 3px 15px;
            text-align: center;
            font-weight: bold;
            background: #ccc;
            font-size: 13px;
        }

        td {
            border-right: 1px solid #888;
            border-bottom: 1px solid #888;
            padding: 3px 15px;
            text-align: center;
            color: #3C3C3C;
        }
复制代码


准备即时预览图片的js代码:



其实这是从另外一篇稍作修改而来,更多参考:http://www.cnblogs.com/insus/p/4301179.html 现成的,呵呵,那都是持续努力学习的结果。

显示数据与动态产生Table:



上面代码示例中,#119与#120代码,是显示图片,有关base64图片,可以参考独立演示:http://www.cnblogs.com/insus/p/3621199.html
当然,完全正确应该是如下:



#122是动态指定图片原来的mine type。语法就是简洁与方便。

asp.net mvc图片上传与显示,整个实现过程,并没有怎样的复杂。一个一个小功能来实现。

Insus.NET这大半年以来,均是以学习asp.net mvc为主,但asp.net也有涉及,但是相对较少了。一旦觉得技术成熟,马上使用asp.net mvc来实现专案。与大家一起努力......

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

ASP.NET MVC图片上传前预览

今年的学习计划是学好ASP.NET MVC和jQuery,多练习,不懂的去网上找或是多看书! 早上有练习图片上传前预览并获取图片文件名和图片字节大小。 在控制器中创建一个Action: ...
  • linybo
  • linybo
  • 2015年03月27日 14:07
  • 1317

Asp.Net Mvc 使用WebUploader 多图片上传

http://www.itnose.net/detail/6178274.html    最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是一次只...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

mvc api 和 asp.net中输出图片

先说说服务器上怎么存储图片,一般的方式有两种,第一种是直接把图片存在数据库中,然后需要的时候从数据库中把图片拿出来,当然这用效率不用想你也知道。   另外一种方式别人给你图片,你把图片存下来,然后把图...

ASP.NET MVC 图片上传

author: Yeshen time:2016.11.11 http://blog.csdn.net/yeshennet 可以这样做: 在代码目录下新建upload文件夹 Controller:...

Let's-python视频教程发布专贴(更新下载方式: 纳米,电驴,迅雷快传)(2012年10月07日更新纳米部分资源)

3月24日: 准备换个环境了, 要学一些新的东西, 最近没有时间再录了, 可能会停的时间更长一些.  现在录到了第20集, 还有函数编程, 模块, 执行环境, 面向对象, 正则表达式这些主要部分....
  • lgg201
  • lgg201
  • 2009年10月08日 22:02
  • 32048

ASP.NET MVC 接收Android上传的图片

从android端上传一张图片到 .NET MVC里时,如果你需要传入一些自定义参数(如上传者的ID)那么本文章将对你有用。 原理:图片以流的方式发送。参数用地址栏传址。 android端发送图片...

ASP.NET MVC3 上传头像图片并截图

关于上传头像并且截图网上应该有很多资料,大多都是JQuery插件,用起来不是很方便 本文所介绍的方法将快速完成一个“上传头像图片并截图”,只需要修改少量的代码   我们先来看看完成后的效果: 下面我...

ASP.Net MVC3 图片上传详解(form.js,bootstrap)

图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo。完全是用jquery前后交互,没有用插件。      最终效果图如...
  • wanwei8
  • wanwei8
  • 2014年01月06日 17:06
  • 1194
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET MVC图片管理(上传,预览与显示)
举报原因:
原因补充:

(最多只允许输入30个字)