ASP.NET MVC图片管理(上传，预览与显示) 数据流存储数据库方式

╰+攻爆jí腚メ 2022-05-29 02:17 217阅读 0赞

先看看效果(下面gif动画制作有点大，5.71MB)：  
[![041122070758240.gif][]][041122070758240.gif 1]

题外话：上面选择图片来源于Insus.NET的新浪微博：[http://weibo.com/104325017][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\]:  
![041151001734067.png][]

![ContractedBlock.gif][]

根据数据表，我们需要在asp.net mvc的models目录中创建一个mode，习惯性是以数据表来创建:  
[![041153363402693.png][]][041153363402693.png 1]  
  
  
由于我们还要处理程序与数据库之间的交流，创建一个Entity，两个方法，一是获取所有数据，另一个是为添加数据所准备:  
[![041157256723695.png][]][041157256723695.png 1]

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

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

![ContractedBlock.gif][]

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

控制器两个Action代码：

![ContractedBlock.gif][]

下是完成View视图，在视图中我们先定义表格样式：  
[![041352536042143.png][]][041352536042143.png 1]

![ContractedBlock.gif][]

准备即时预览图片的js代码：  
![041354331065011.png][]  
  
  
其实这是从另外一篇稍作修改而来，更多参考：[http://www.cnblogs.com/insus/p/4301179.html][http_www.cnblogs.com_insus_p_4301179.html] 现成的，呵呵，那都是持续努力学习的结果。  
  
显示数据与动态产生Table：  
[![041411148356808.png][]][041411148356808.png 1]  
  
  
上面代码示例中，\#119与\#120代码，是显示图片，有关base64图片，可以参考独立演示：[http://www.cnblogs.com/insus/p/3621199.html][http_www.cnblogs.com_insus_p_3621199.html]  
当然，完全正确应该是如下：  
[![041422068775538.png][]][041422068775538.png 1]  
  
  
\#122是动态指定图片原来的mine type。Razor语法就是简洁与方便。  
  
asp.net mvc图片上传与显示，整个实现过程，并没有怎样的复杂。一个一个小功能来实现。

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

原文地址：[http://www.cnblogs.com/insus/p/4620420.html][http_www.cnblogs.com_insus_p_4620420.html]

[041122070758240.gif]: /images/20220529/74d80709222149c3892ac6f282fc68c1.png
[041122070758240.gif 1]: http://images0.cnblogs.com/blog2015/28036/201507/041122070758240.gif
[http_weibo.com_104325017]: http://weibo.com/104325017
[041151001734067.png]: /images/20220529/c8a15607b6a44f6a99fb6c594da9f3a7.png
[ContractedBlock.gif]: /images/20220529/327d19b06752442f9ea5128d7e8e7d83.png
[041153363402693.png]: /images/20220529/86cb177186a049fcaa47c0e6dd48dd5c.png
[041153363402693.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/041153363402693.png
[041157256723695.png]: /images/20220529/22fb9b79bdd84ebcaa466965cecd4b31.png
[041157256723695.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/041157256723695.png
[http_www.cnblogs.com_insus_p_4156735.html]: http://www.cnblogs.com/insus/p/4156735.html
[041342374283486.png]: /images/20220529/5f6b4dc1107645f99c78b0ae4adbf2e3.png
[041342374283486.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/041342374283486.png
[041348340291079.png]: /images/20220529/659bc7efc69c4987bcde4344f2faf47c.png
[041348340291079.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/041348340291079.png
[041352536042143.png]: /images/20220529/95641cce709648ebb6d0c113dd998c20.png
[041352536042143.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/041352536042143.png
[041354331065011.png]: /images/20220529/35849cc3d0ea4554ae44f17d0b24c5b3.png
[http_www.cnblogs.com_insus_p_4301179.html]: http://www.cnblogs.com/insus/p/4301179.html
[041411148356808.png]: /images/20220529/6780315c68a64977a3b45479f72dffb7.png
[041411148356808.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/041411148356808.png
[http_www.cnblogs.com_insus_p_3621199.html]: http://www.cnblogs.com/insus/p/3621199.html
[041422068775538.png]: /images/20220529/aeba112a9f8e48f08ee7de8b454f96f7.png
[041422068775538.png 1]: http://images0.cnblogs.com/blog2015/28036/201507/041422068775538.png
[http_www.cnblogs.com_insus_p_4620420.html]: http://www.cnblogs.com/insus/p/4620420.html