ASP.NET MVC实现图片上传、图片预览显示
先看看效果(下面gif动画制作有点大，5.71MB)：
题外话：上面选择图片来源于Insus.NET的新浪微博，言归正传，由于以前的asp.net mvc的练习文件上传文件，显示或是下载等博文，均是存储于站点目录之中。这次练习是把图片存储于数据库，也就是以图片的数据流存储，在上传时我们需要把文件处理为数据库，显示时，我们需要把数据流处理为文件。
一看上面的演示，我们还会看到一个预览区。选择图片时，预览区会预先显示选择图片。确认正确之后，我们再上传至数据库中。
使用下面SQL语句创建表[dbo].[ImageStore]，存储过程2个[dbo].[usp_ImageStore_Insert]和[dbo].[usp_ImageStore_GetAll]:
根据数据表，我们需要在asp.net mvc的models目录中创建一个mode，习惯性是以数据表来创建:
由于我们还要处理程序与数据库之间的交流，创建一个Entity，两个方法，一是获取所有数据，另一个是为添加数据所准备:
上面的Entity中，有两个标记。
标记2，Insus.NET有写成一个Utility，也就是说把DataTable转换为List<T>的工具，其实有以前的asp.net mvc也有提及或是代码分享，在此你不必再费时费心去搜索，参考下面代码就是了：
在上面的代码示例中，#35行的方法，是DataTable转换为json序列化，由于本例中并无使用到，即在此略过。
接下来，打开控制器创建两Action，第一个控制是视图操作，我们有把数据传入视图中。而第二个操作，是为处理上传文件方法所服务。
控制器两个Action代码：
下是完成View视图，在视图中我们先定义表格样式：
准备即时预览图片的js代码：
显示数据与动态产生Table：
上面代码示例中，#119与#120代码，是显示图片，有关base64图片，可以参考独立演示：
演示ASP.NET MVC应用程序，显示Base64图片。
在控制器中，Insus.NET有创建两个Action，一个是为视图准备，另一个是把文件转换为FileStream，然后再用 Convert.ToBase64String() 来转换。
在下面的视图中，添加一个div markup来load图片。语法：'<img src="data:image/png;base64,' + data.Base64Imgage + '" />'：
实时演示：
当然，完全正确应该是如下：
#122是动态指定图片原来的mine type。语法就是简洁与方便。
asp.net mvc图片上传与显示，整个实现过程，并没有怎样的复杂，一个一个小功能来实现。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 这篇文章主要介绍了C#从数据库读取图片并保存的方法，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2021-01-16
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程，各位想知道方法的使用者们，那么下面就快来跟着小编一...2016-09-14
- php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30
- 在开发过程中，使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误，同样Visual Studio也支持对SQL Server里面的存储过程进行调试，下面就让我们看看具体的调试方法。...2021-09-22
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13- 本文章来人大家介绍一个php文件上传类的使用方法，期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类， 它可以帮...2016-11-25
- 又码了一个周末的代码，这次在做一些关于文件上传的东西。（PHP UPLOAD）小有收获项目是一个BT种子列表，用户有权限上传自己的种子，然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项，下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- Photoshop的这一款软件小编相信很多的人都已经是使用过了吧，那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程，想知道制作步骤的玩家们，那么下面...2016-09-14
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- 图片剪裁是常用的方法，那么如何通过4坐标剪裁图片，本文就详细的来介绍一下，感兴趣的小伙伴们可以参考一下...2021-06-04
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //not...2013-10-04
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22