ASP. net mvc allows you to upload images and preview images,

ASP. net mvc allows you to upload images and preview images,

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

Digress: The above picture was taken from Insus. NET's Sina Weibo, And the words are back and forth. Since the previous asp.net mvc practice file uploads files, displays, downloads, and other blog posts, they are all stored in the site directory. In this exercise, images are stored in the database, that is, data stream storage of images. When uploading images, we need to process files as databases. When displaying images, we need to process data streams as files.

After reading the demo above, we will also see a preview area. When you select an image, the preview area displays the selected image in advance. After confirming the correctness, We will upload it to the database.

Use the following SQL statement to create a table [dbo]. [ImageStore], two stored procedures [dbo]. [usp_ImageStore_Insert] and [dbo]. [usp_ImageStore_GetAll]:

Based on the data table, we need to create a mode in the models directory of asp.net mvc. It is customary to create a data table:

Since we need to process the communication between the program and the database, create an Entity using two methods: one is to get all the data, and the other is to prepare for adding the data:

There are two tags in the above Entity.
Mark 2, Insus. NET has been written as a Utility, that is, to convert DataTable to List <T> tool. In fact, some previous asp.net mvc also mentioned or shared code. You do not have to bother searching here, refer to the following code:

In the preceding code example, the #35 line method is to convert able to json serialization. Since this example is not used, it is skipped here.

Next, open the Controller to create two actions. The first control is view operations. We have imported data into the view. The second operation serves to process the File Upload method.

Two Action codes of the controller:

The following shows how to complete the View. In the View, we first define the table style:

Prepare the js Code for instant preview of the image:

Display Data and dynamically generate tables:

In the code example above, the Code #119 and #120 are for displaying images. For information about base64 images, see the independent Demo:

Demonstrate ASP. net mvc application and display Base64 images.

In the controller, Insus. NET creates two actions. One is to prepare the view, the other is to Convert the file to FileStream, and then Convert it with Convert. ToBase64String.

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

Real-time Demonstration:

Of course, it should be exactly as follows:

#122 specifies the original mine type of the image dynamically.RazorThe syntax is concise and convenient.

The entire implementation process of asp.net mvc Image Upload and display is not complicated. It is implemented by a small function.

The above is all the content of this article, hoping to help you learn.