asp.net mvc implementation picture upload, Picture preview Display _ Practical skills

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

Digression: The above choice of pictures from Insus.net Sina Weibo, to the back, due to the previous asp.net MVC practice file Upload files, display or download and other Bowen, are stored in the site directory. This exercise is to store the pictures in the database, that is, the image of the data stream storage, upload when we need to process the file as a database, display, we need to process the data stream as a file.

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 will upload it to the database.

Create a table [dbo] using the following SQL statement. [Imagestore], stored procedure 2 [dbo]. [Usp_imagestore_insert] and [dbo]. [Usp_imagestore_getall]:

Based on the datasheet, we need to create a mode in the models directory of ASP.net MVC, which is habitually created in a datasheet:

Because we also have to deal with the exchange between the program and the database, create a entity, two methods, one is to get all the data, the other is to add data prepared:

In the entity above, there are two marks.
Tag 2,insus.net has written a utility, that is, the conversion of a DataTable to a list<t> tool, in fact, there are previous ASP.net mvc also mentioned or code sharing, where you do not have to bother to search, Refer to the following code:

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

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

Controller Two action code:

The following is the complete view view, in which we first define the table style:

To prepare an instant preview of the picture's JS code:

Displaying data and dynamically generating table:

In the code example above, #119与 #120 code, is to display a picture, about Base64 picture, you can refer to the Independent demo:

Demo asp.net MVC application, display Base64 picture.

In the controller, Insus.net has two action created, one for the view, the other for converting the file to FileStream, and then Convert.tobase64string ().

In the following view, add a div markup to the load picture. Syntax:' ':

Live Demo:

Of course, exactly right should be as follows:

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

asp.net mvc image upload and display, the entire implementation process, and not how complex, a small function to achieve.

The above is the entire content of this article, I hope to help you learn.