MVC应用程序显示上传的图片

前两篇《MVC应用程序实现上传文件http://www.cnblogs.com/insus/p/3590907.html和《MVC应用程序实现上传文件(续)http://www.cnblogs.com/insus/p/3594834.html,我们练习了上传文件,当然上传图片也是一样。

此篇我们练习,怎样在MVC应用程序中显示用户上传的图片。为了接近更真实的练习,Insus.NET决定对以前的程序修改一下,就是上传的目录把原来的Temp目录改为UploadFiles目录。也就是说,Temp目录保留,在应用程序中,添加多一个UploadFiles目录。

再对原来的model修改一下,添加两个属性:

改好了,现在可以开如新篇,先在数据库中,创建两个存储过程[dbo].[usp_FileLibrary_GetAll]:

和[dbo].[usp_FileLibrary_GetByPrimaryKey]:

两个存储过程都有说明其的作用与功能。

写好存储过程,现在需要在MVC应用程序中,找到FileLibraryEntity.cs来,添加此两个存储过程的使用:

在MVC中显示图片,第一次呈现给用户看到的,不是原图尺寸,应该是缩略图,用户点击图片查看之后,再看到的,才是原图大小。因此,Insus.NET写一个Utility,是在用户浏览时,图片产生一个缩略图至Temp目录中。也就是文章开头,需要改目录的原因。因为Temp目录将来会存储很多临时文件,系统也会定时删除或是清空它。

下面是缩略图产生的函数:

在应用程序中,找到HomeController.cs并打开,按下面的几个步骤,添加Action或是xxxResult方法:

创建一个新视图:

现在我们可以写jQuery,去获取数据库数据与显示上传文件夹中相应的图片:

算完成了,显示原图,此篇暂时略过,下面是动画演示实时效果:

MVC应用程序显示上传的图片

时间: 2024-10-21 06:18:20

MVC应用程序显示上传的图片的相关文章

MVC应用程序显示上传的图片(续)

上一篇<MVC应用程序显示上传的图片>http://www.cnblogs.com/insus/p/3597543.html 最后有提及没有实现用户点击图片,显示原图的功能.此篇Insus.NET来完成它. 想使用一个dialog box来呈现原图.这个jQuery的UI已经有了,引用相关的js类库即可. 代到HomeController.cs控制器,添加一个ContentResult方法: 即是传入图片名称,找到上传目录的相对应的图片.打开ViewUploadPhoto.cshtml 视图,

MVC应用程序实现上传文件

学习MVC以来,一直想实现上传文件的功能,使用jQuery来实现上传,有很多插件.此篇演示中,Insus.NET是使用Uploadify.http://www.uploadify.com/,它有更多的文件说明,可以参考:http://www.uploadify.com/documentation/. 你可以使用MVC的NuGet Packages管理器,来安装这个jQuery的插件: 安装好之后,可以在MVC应用程序的Scripts目录看到它: 在HomeContollers中,创建一个Acti

MVC应用程序实现上传文件(续)

前几天,有练习了<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html 那只是把文档上传至MVC应用程序下的某一目录之中. 其实,真实环境中,还得存储一些相关信息至数据库中.如旧文件名,新存储于文件夹的新文件名,大小,基本的类型等. 下面Insus.NET就慢慢来演示此功能. 先是在数据库中,创建一个表[dbo].[FileLibrary]: 创建一个存储过程,好让程序能对上面创建好的表,添加数据[dbo].[usp_FileLib

.net 实现的上传下载,如果是图片就显示上传的图片

HTML: <div> <input id="fileUpload" type="file" runat="server" /> <input id="btnFile" type="button" value="上传" runat="server" /> <asp:Button ID="Button1" r

编辑图片时,能够实时显示上传的图片(预览)

html代码: js代码: $("#store_img").on("change",function(){ var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径 if (objUrl) { $(".hide_img img").attr("src", objUrl) ; //将图片路径存入src中,显示出图片 } }); //建立一個可存取到該fi

.net mvc 利用 kindeditor 上传本地图片

最近在用kindeditor 编辑器,在上传本地图片的时候遇到了点问题,不能正确的上传. 现在把使用 kindeditor 上传本地图片的配置记录一下. 1.下载kindeditor.http://kindeditor.net/down.php 2.解压,将所有文件复制到项目里.我是放在content里面. (您可以根据需求删除以下目录后上传到服务器,asp - ASP程序,asp.net - ASP.NET程序,php - PHP程序,jsp - JSP程序,examples - 演示文件)

ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"中说的,这种方法足够轻.足够好.但今天,要在前面的基础上再增加2个需求: 1.异步判断上传的图片是否超过最大限制2.把上传的图片裁剪成大中小3张图片,分别保存,删除的时候一块被删除 上传图片如果超出最大尺寸限制,终止上传,并报错误信息. 前台上传图片,显示缩略图. 在项目根目录下的指定文

KindEditor上传本地图片在ASP.NET MVC的配置

http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. 开发工具:VS 2010 EN 开发语言:Visual C# ASP.NET MVC 2.0 kindeditor-3.5-zh_CN 下载 文中以Blog文章为例,为做演示,数据表比较简单,如下图: 添加 BlogController Code: 1 2 3 4 5 6 7 8 9 10 11 1

MVC&amp;WebForm对照学习:文件上传(以图片为例)

在web应用中,文件上传是个很普遍的功能,那么今天就来小结一下asp.net中文件上传的方式.首先我们快速来回忆一下WebForm中的文件上传的方法. Part 1 WebForm中的文件上传  FileUpload服务器控件 aspx: <div> <asp:Image ImageUrl="~/uploads/1.jpg" ID="img2" runat="server" Width="150px" Hei