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。Razor语法就是简洁与方便。

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

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

赞 (0)

相关推荐

  • ASP.NET MVC 文件上传教程(一）

    ASP.NET MVC 文件上传教程(一）

    这一节我们来讲讲在MVC中如何进行文件的上传,我们逐步深入,一起来看看. Upload File(一) 我们在默认创建的项目中的Home控制器下添加如下: public ActionResult UploadFile() { return View(); } [HttpPost] public ActionResult UploadFile(HttpPostedFileBase file) { var fileName = file.FileName; var filePath = Server

  • ASP.NET MVC文件上传教程(二）

    ASP.NET MVC文件上传教程(二）

    上文ASP.NET MVC 文件上传教程(一)我们讲了简单的上传以及需要注意的地方,查相关资料时,感觉上传里面涉及到的内容还是比较多,于是就将上传这一块分为几节来处理,同时后续也会讲到关于做上传时遗漏的C#应该注意的地方,及时进行查漏补缺,尽量将这一块完善起来. 引入 上一节我们讲到了上传这一块,有朋友提出未涉及到大文件的上传这一块,思前想后还是来试着做做,毕竟之前没怎么去仔细考虑过这个问题,尤其还可以联系实际开发中创建文件夹等一系列问题,同时关于上传在网上随便找找都充斥着大量的组件,我们何必再

  • AngularJS向后端ASP.NET API控制器上传文件

    本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下 首先服务端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task<HttpResponseMessage> Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Requ

  • ASP.NET多文件上传控件Uploadify的使用方法

    ASP.NET多文件上传控件Uploadify的使用方法

    对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的. 下面是文件上传后的缩略图如下 列表的组装使用JS模板,这样对于复杂的HTML结构来说,可以减少拼写错误的出现,关闭是将LI元素从UI元素移除,最后提交时,从UI里检查LI元素,然后对它进行组装,并进

  • ASP.NET MVC图片上传前预览简单实现

    ASP.NET MVC图片上传前预览简单实现

    本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体实现代码,供大家参考,具体内容如下 在控制器中创建一个Action: 在Views目录下对应的控制器名称下创建视图PreViewing: 上图中 标记1,引用jQuery类库. 标记2,选择文件. 标记3,预览图片. 标记4,显示图片文件名和图片字节大小. 标记5,是Javascript代码...... 本例预览: 以上就是本文的全部内容,希望对大家的学习有所帮助.

  • asp.net core实现文件上传功能

    asp.net core实现文件上传功能

    本文实例为大家分享了单文件上传.多文件上传的功能,供大家参考,具体内容如下 单文件上传  上传文件在Web应用程序中是一个常见的功能.在asp.net core中上传文件并保存在服务器上,是很容易的.下面就来演示一下怎么样在 ASP.NET Core项目中进行文件上传.  首先,创建一个 asp.net core 项目,然后在Controller文件件添加一个HomeController,然后在 Views 文件夹的 Home 文件夹里添加一个 New.cshtml 视图文件.如下图: 添加一个

  • ASP.NET MVC5实现文件上传与地址变化处理（5）

    ASP.NET MVC5实现文件上传与地址变化处理（5）

    一.上传文件和重复文件处理 文件处理的原则是:不在数据库中保存文件,只在数据库中保存文件信息(Hash值等).采取文件的MD5重命名文件在一般情况足够处理文件的重复问题,强迫症倾向则可以考虑将MD5和其他摘要算法结合. public static string Save(HttpPostedFileBase file, string path) { var root = "~/Upload/" + path + "/"; var phicyPath = Hostin

  • ASP.NET文件上传控件Uploadify的使用方法

    ASP.NET文件上传控件Uploadify的使用方法

    对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl

  • asp.net fileupload控件上传图片并预览图片

    asp.net fileupload控件上传图片并预览图片

    本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能,并对web.config进行了配置,先看一下最终效果: 页面代码: <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1&quo

  • 基于ASP.NET+easyUI框架实现图片上传功能（判断格式+即时浏览 ）

    基于ASP.NET+easyUI框架实现图片上传功能（判断格式+即时浏览 ）

    基于ASP.Net +easyUI框架上传图片,判断格式+实现即时浏览,具体内容如下 <div> 选择图片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="fil

随机推荐