这篇文章主要介绍ASP。净MVC怎样实现图片上,传图片预览显示,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
先看看效果(下面gif动画制作有点大,5.71 mb):
题外话:上面选择图片来源于Insus.NET的新浪微博,言归正传,由于以前的asp.net MVC的练习文件上传文件,显示或是下载等博文,均是存储于站点目录之中。这次练习是把图片存储于数据库,也就是以图片的数据流存储,在上传时我们需要把文件处理为数据库,显示时,我们需要把数据流处理为文件。
一看上面的演示,我们还会看到一个预览区。选择图片时,预览区会预先显示选择图片。确认正确之后,我们再上传至数据库中。
使用下面SQL语句创建表[dbo]。[ImageStore],存储过程2个[dbo]。[usp_ImageStore_Insert]和[dbo]。[usp_ImageStore_GetAll]:
根据数据表,我们需要在asp.net MVC的模型目录中创建一个模式,习惯性是以数据表来创建:
由于我们还要处理程序与数据库之间的交流,创建一个实体,两个方法,一是获取所有数据,另一个是为添加数据所准备:
上面的实体中,有两个标记。
标记2,Insus.NET有写成一个实用工具,也就是说把DataTable转换为List
在上面的代码示例中,# 35行的方法,是DataTable转换为json序列化,由于本例中并无使用的到,即在此略过。
接下来,打开控制器创建两行动,第一个控制是视图操作,我们有把数据传入视图中。而第二个操作,是为处理上传文件方法所服务。
控制器两个行动代码:
下是完成观点视图,在视图中我们先定义表格样式:
准备即时预览图片的js代码:
显示数据与动态产生表:
上面代码示例中,# 119与# 120代码,是显示图片,有关base64图片,可以参考独立演示:
演示ASP。净MVC应用程序,显示Base64图片。
在控制器中,水稻。净有创建两个动作,一个是为视图准备,另一个是把文件转换为文件流,然后再用Convert.ToBase64String()来转换。
在下面的视图中,添加一个div标记来负载图片。语法:<强> & # 39;& lt; img src=笆?图像/png; base64, & # 39;+数据。Base64Imgage + & # 39;“/祝辞& # 39;:
实时演示:
当然,完全正确应该是如下:
# 122是动态指定图片原来的我的类型。<标签=" Editor_Edit_APOptions_Advancedpanel1_cklCategories_34 ">剃刀标签语法就是简洁与方便。
asp.net MVC图片上传与显示,整个实现过程,并没有怎样的复杂,一个一个小功能来实现。
以上是“ASP。净MVC怎样实现图片上,传图片预览显示”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
