asp.net mvc 上传到服务器图片不显示,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的工具，其实有以前的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图片。语法：''：

实时演示：

当然，完全正确应该是如下：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

asp.net mvc 上传到服务器图片不显示,ASP.NET MVC实现图片上传、图片预览显示相关推荐

FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用_ ...
jquery-添加图片，预览显示，删除预览图片，多图片上传，后端springMVC进行接收
效果预览: html: <div class="inputFile"><input type="file" name="photo& ...
node将当前文件上传到服务器,以编程方式将文件从node.js上传到另一个Web服务器...
我需要将文件从node.js应用程序推送到其他地方运行的Web服务器,该服务器通过典型的上载机制接受文件.例如,假设接收服务器有一个网页,这样的形式:以编程方式将文件从node.js上传到另一个Web ...
bootstrap上传插件（fileinput.js）预览显示删除图标问题
预览时显示和不显示上传和删除图标,主要是通过 uploadUrl:"/..." 来控制,如果注释掉就会不显示 $(".fileupload").fileinpu ...
html选择文件夹控件,File文件控件，选中文件(图片,flash,视频)即立即预览显示
我们平常用file文件控件上传文件,要预览有时会刷新页面,结果file控件被清空,好多人问能能让他不清空或重新赋值,因为处于安全性的考虑,这是不可能的.那怎么进行无刷新预览呢?这里我把我所使用的方法写 ...
Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览
需求 Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏观看,避免用户直接操作返回后导致页面空白(原有消息记录消失 - 重新进入项目首页) [补充] 全屏 ...
附件预览（可用于图片、word文档、pdf、.xls表格等预览）
一.fileView.vue文件里的完整代码(fileView.vue即为抽离出的附件预览组件) 1.html部分 <template><div class="docCon ...
使用Vue，Element-ui导入Excel并预览显示数据，并经数据保存传至后台数据库
需求:基于Vue,Element-ui框架,将本地Excel上传,并将表格中的数据绑定显示在上传页面,并保存提交到后台数据库此功能在做的时候网上有很多的案例,但是都是基于Export2Excel.j ...
网页上下标标签预览显示框框解决方法
产生原因网页版特殊字符,如上下标 CO₂.黄曲霉毒素B₁,因不同电脑字体库稍微存在差异,导致win7打印含有该特殊字符的标签.文件时,打印出来的上下标显示为框框,而Win10打印出来却正常.显示为框 ...

asp.net mvc 上传到服务器图片不显示,ASP.NET MVC实现图片上传、图片预览显示

asp.net mvc 上传到服务器图片不显示,ASP.NET MVC实现图片上传、图片预览显示相关推荐

最新文章

热门文章

asp.net mvc 上传到服务器 图片不显示,ASP.NET MVC实现图片上传、图片预览显示

asp.net mvc 上传到服务器 图片不显示,ASP.NET MVC实现图片上传、图片预览显示相关推荐

最新文章

热门文章

asp.net mvc 上传到服务器图片不显示,ASP.NET MVC实现图片上传、图片预览显示

asp.net mvc 上传到服务器图片不显示,ASP.NET MVC实现图片上传、图片预览显示相关推荐