ASP. NET MVC image Management (upload, preview and display)

First look at the effect (the following GIF animation is a bit large, 5.71MB):

Off-topic: the above selection of images from Insus.net Sina Weibo: http://weibo.com/104325017 was also last night (2015-07-03) insus.net cooking dinner. If you also want to learn to cook, you can also focus on insus.net Weibo.

Anyway, because the previous ASP. NET MVC Practice file Upload file, display or download, etc., are stored in the site directory. This exercise is to store the pictures in the database. That is, the data stream is stored as a picture. We need to process the file as a database when we upload it, we need to process the data stream as a file when we display it.

Looking at the demo above, we'll also see a preview area. When you select a picture, the preview area displays the selected picture in advance. Once the confirmation is correct, we'll upload it to the database.

Use the following SQL statement to create the table [dbo]. [Imagestore], stored procedure 2 [dbo]. [Usp_imagestore_insert] and [dbo]. [Usp_imagestore_getall]:

CREATE TABLE [dbo].[Imagestore](    [IMAGESTORE_NBR] [int] IDENTITY(1,1) not NULL PRIMARY KEY,    [Name] [nvarchar]( -) not NULL,    [MimeType] [nvarchar]( -) not NULL,    [Content] [Image]  not NULL)GOCREATE PROCEDURE [dbo].[Usp_imagestore_insert](    @Name [nvarchar]( -),    @MimeType [nvarchar]( -),    @Content [Image]) asINSERT  into [dbo].[Imagestore]([Name],[MimeType],[Content])VALUES(@Name,@MimeType,@Content)GOCREATE PROCEDURE [dbo].[Usp_imagestore_getall] asSELECT [IMAGESTORE_NBR],[Name],[MimeType],[Content]  from [dbo].[Imagestore]GO

View Code

Based on the data table, we need to create a mode in the models directory of ASP., which is habitually created as a data table:



As we also deal with the communication between the program and the database, create an entity, two methods, one is to get all the data, and the other is to add data to prepare:

In the above entity, there are two marks, one can refer to this article: http://www.cnblogs.com/insus/p/4156735.html.
Tag 2,insus.net is written as a utility, that is, to convert the DataTable to List<t> tool, in fact, there is a previous ASP. NET MVC also has the mention or the code share, here you don't have time to bother to search, The following code is the reference:

In the preceding code example, #35行的方法, the DataTable is converted to JSON serialization, which is skipped in this case because it is not used in this example.

Code Source:

  Public StaticList<t> tolist<t>(DataTable DataTable) {varColumnNames = datatable.columns.cast<datacolumn>()                . Select (c=c.columnname).            ToList (); varProperties =typeof(T).            GetProperties (); returnDatatable.asenumerable (). Select (row =            {                varOBJT = activator.createinstance<t>(); foreach(varProinchproperties) {                    if(Columnnames.contains (pro. Name) Pro. SetValue (OBJT, Row[pro.                Name]); }                returnOBJT; }).        ToList (); }

View Code

Next, open the controller to create two actions, the first control is the view operation, we have to pass the data into the view. The second operation is the service for handling the upload file method.

Controller Two action code:

  PublicActionResult imagemanagement () {imagestoreentity ise=Newimagestoreentity (); varModel =Ise.            GetAll (); returnView ("imagemanagement", model); } [HttpPost] PublicActionResult UploadFile (ienumerablefilename) {            foreach(varFileinchfilename) {                if(file. ContentLength >0) {Imagestore Imagestore=NewImagestore (); Imagestore.name=path.getfilename (file.                    FileName); Imagestore.mimetype=file.                                                            ContentType; using(Stream InputStream =file. InputStream) {MemoryStream MemoryStream= InputStream asMemoryStream; if(MemoryStream = =NULL) {MemoryStream=NewMemoryStream ();                        Inputstream.copyto (MemoryStream); } imagestore.content=Memorystream.toarray (); } imagestoreentity Ise=Newimagestoreentity (); Ise.                Insert (Imagestore); }            }            returnRedirecttoaction ("imagemanagement"); }

View Code

Below is the complete view, in which we define the table style:

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

To prepare the JS code for the instant preview image:



In fact, this is a slightly modified from another, more reference: http://www.cnblogs.com/insus/p/4301179.html ready-made, hehe, that is the result of continuous efforts to study.

Show data with dynamically generated table:



In the above code example, #119与 #120 code, is the display picture, for Base64 picture, you can refer to the standalone demo: http://www.cnblogs.com/insus/p/3621199.html
Of course, exactly right should be as follows:



#122是动态指定图片原来的mine type. Razor Grammar is simple and convenient.

The whole implementation of ASP. NET MVC image upload and display is not so complicated. A small feature to implement.

Insus.net has been studying ASP. NET-based MVC for half a year, but ASP. NET is also involved, but relatively few. Once you feel the technology is ripe, use ASP. NET MVC to implement the project. Work with everyone ...

ASP. NET MVC image Management (upload, preview and display)