先看看效果(上面gif动画制作有点大,5.71MB):
json 1

json, 

题外话:上边选拔图片来源Insus.NET的新浪博客园:http://weibo.com/104325017 也是明儿晚上(二零一六-07-03)Insus.NET烹饪的晚餐。假使您也想上学烹饪,也得以关切Insus.NET的乐乎。

言归正传,由于原先的asp.net
mvc的演练文件上传文件,显示或是下载等博文,均是储存于站点目录之中。这一次操演是把图片存款和储蓄于数据库。也正是以图纸的多少流存款和储蓄。在上传时大家要求把文件处理为数据库,显示时,我们需求把数据流处理为文件。

一看上边包车型大巴以身作则,我们还会看到1个预览区。选拔图片时,预览区会事先展示选拔图片。确认无误之后,我们再上传至数据库中。

动用下边SQL语句成立表[dbo].[ImageStore],存款和储蓄进程三个[dbo].[usp_ImageStore_Insert]和[dbo].[usp_ImageStore_GetAll]:
json 2

json 3json 4

CREATE TABLE [dbo].[ImageStore](
    [ImageStore_nbr] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,
    [Name] [nvarchar](50) NOT NULL,
    [MimeType] [nvarchar](50) NOT NULL,
    [Content] [image] NOT NULL
)
GO

CREATE PROCEDURE [dbo].[usp_ImageStore_Insert]
(
    @Name [nvarchar](50),
    @MimeType [nvarchar](50),
    @Content [image]
)
AS
INSERT INTO [dbo].[ImageStore] ([Name],[MimeType],[Content]) VALUES (@Name,@MimeType,@Content)
GO

CREATE PROCEDURE [dbo].[usp_ImageStore_GetAll]
AS
SELECT [ImageStore_nbr],[Name],[MimeType],[Content] FROM [dbo].[ImageStore]
GO

View Code

 

听大人讲数据表,我们需求在asp.net
mvc的models目录中开创四个mode,习惯性是以数量表来创制:
json 5

由于大家还要处理程序与数据库之间的交换,创制八个Entity,五个章程,一是收获具有数据,另2个是为抬高多少所预备:
json 6

地点的Entity中,有三个记号,标记一能够参照这篇:http://www.cnblogs.com/insus/p/4156735.html 。
标记2,Insus.NET有写成一个Utility,也正是说把DataTable转换为List<T>的工具,其实有从前的asp.net
mvc也有提及或是代码分享,在此你不用再困难费心去搜寻,参考下边代码即是了:
json 7

在上边的代码示例中,#35行的措施,是DataTable转换为json体系化,由于本例中并无使用到,即在此略过。

code source:

json 8json 9

 public static List<T> ToList<T>(DataTable dataTable)
        {
            var columnNames = dataTable.Columns.Cast<DataColumn>()
                .Select(c => c.ColumnName)
                .ToList();

            var properties = typeof(T).GetProperties();

            return dataTable.AsEnumerable().Select(row =>
            {
                var objT = Activator.CreateInstance<T>();

                foreach (var pro in properties)
                {
                    if (columnNames.Contains(pro.Name))
                        pro.SetValue(objT, row[pro.Name]);
                }

                return objT;
            }).ToList();
        }

View Code

接下去,打开控制器创造两Action,第二个控制是视图操作,大家有把多少传入视图中。而第二个操作,是为拍卖上传文件措施所服务。
json 10

控制器五个Action代码:

json 11json 12

 public ActionResult ImageManagement()
        {
            ImageStoreEntity ise = new ImageStoreEntity();
            var model = ise.GetAll();
            return View("ImageManagement", model);
        }

        [HttpPost]
        public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> filename)
        {
            foreach (var file in filename)
            {
                if (file.ContentLength > 0)
                {
                    ImageStore imageStore = new ImageStore();

                    imageStore.Name = Path.GetFileName(file.FileName);
                    imageStore.MimeType = file.ContentType;

                    using (Stream inputStream = file.InputStream)
                    {
                        MemoryStream memoryStream = inputStream as MemoryStream;
                        if (memoryStream == null)
                        {
                            memoryStream = new MemoryStream();
                            inputStream.CopyTo(memoryStream);
                        }
                        imageStore.Content = memoryStream.ToArray();
                    }

                    ImageStoreEntity ise = new ImageStoreEntity();
                    ise.Insert(imageStore);
                }
            }

            return RedirectToAction("ImageManagement");
        }

View Code

下是实现View视图,在视图中我们先定义表格样式:
json 13

json 14json 15

        div, span, font, a, td {
            font-size: 13px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border-left: 1px solid #aaa;
            border-top: 1px solid #aaa;
            background: #efefef;
        }

        th {
            border-right: 1px solid #888;
            border-bottom: 1px solid #888;
            padding: 3px 15px;
            text-align: center;
            font-weight: bold;
            background: #ccc;
            font-size: 13px;
        }

        td {
            border-right: 1px solid #888;
            border-bottom: 1px solid #888;
            padding: 3px 15px;
            text-align: center;
            color: #3C3C3C;
        }

View Code

预备即时预览图片的js代码:
json 16

骨子里那是从其余一篇稍作修改而来,越多参考:http://www.cnblogs.com/insus/p/4301179.html 现成的,呵呵,那都以频频努力学习的结果。

彰显数据与动态发生Table:
json 17

上边代码示例中,#119与#120代码,是呈现图片,有关base64图片,能够参考独立演示:http://www.cnblogs.com/insus/p/3621199.html
当然,完全正确应该是之类:
json 18

#122是动态内定图片原来的mine type。Razor语法正是精简与便宜。

asp.net
mvc图片上传与呈现,整个完成进度,并没有怎么的错综复杂。三个三个小作用来完结。

Insus.NET那基本上年来说,均是以学习asp.net
mvc为主,但asp.net也有关联,然则相对较少了。一旦觉得技术成熟,立即选取asp.net
mvc来贯彻专案。与大家一齐努力……

 

相关文章

网站地图xml地图