ASP.NET MVC image management (upload, preview and display) data flow storage database method

Let's take a look at the effect first (the gif animation below is a bit large, 5.71MB):

 

Digression: The pictures selected above are from Insus.NET's Sina Weibo: http://weibo.com/104325017  is also the dinner cooked by Insus.NET last night (2015-07-03). If you also want to learn to cook, you can also follow Insus.NET's Weibo.

Closer to home, because the previous asp.net mvc practice files upload files, display or download blog posts, are all stored in the site directory. This exercise is to store images in a database. That is, it is stored as a data stream of pictures. When uploading, we need to process the file as a database, and when displaying, we need to process the data stream as a file.

Taking a look at the demo above, we also see a preview area. When you select an image, the preview area will pre-display the selected image. After confirming that it is correct, we 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]:

  View Code

 

According to the data table, we need to create a mode in the models directory of asp.net mvc, which is habitually created with the data table: since we also need to deal with the communication between the program and the database, create an Entity, two methods, one is to get all the data, the other is to prepare for adding data:





In the above Entity, there are two marks, mark one can refer to this: http://www.cnblogs.com/insus/p/4156735.html  .
Mark 2, Insus.NET is written as a Utility, that is to say, a tool to convert DataTable to List<T>, in fact, the previous asp.net mvc also mentioned or shared code, here you don't need to spend time and trouble searching , refer to the following code:


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

code source:

  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 for processing the upload file method.


Controller two Action codes:

  View Code


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

  View Code


Prepare the js code for instant preview of the picture:



In fact, this is slightly modified from another article, more reference: http://www.cnblogs.com/insus/p/4301179.html  Ready-made, huh, that's all The result of continuous hard work.

Display data and dynamically generate Table: In the above code example, #119 and #120 codes are display pictures. For base64 pictures, you can refer to the independent demo: http://www.cnblogs.com/insus/p/3621199.htmlOf course , it should be as follows: #122 is the original mine type of the dynamically specified picture. Razor syntax is all about simplicity and convenience. Asp.net mvc image upload and display, the entire implementation process is not complicated. A small function to achieve.












Insus.NET这大半年以来,均是以学习asp.net mvc为主,但asp.net也有涉及,但是相对较少了。一旦觉得技术成熟,马上使用asp.net mvc来实现专案。与大家一起努力......


原文地址:http://www.cnblogs.com/insus/p/4620420.html

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325528881&siteId=291194637