ASP. net mvc image management (upload, preview, and display ),

ASP. net mvc image management (upload, preview, and display ),

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

 

Topic: The above selected pictures from Insus. NET Sina Weibo: http://weibo.com/104325017 is also last night () Insus. NET cooking dinner. If you want to learn how to cook, you can also follow Insus. NET Weibo.

To put it bluntly, because the previous asp.net mvc exercise file uploads, displays, downloads, and other blog posts, it is stored in the site directory. This exercise stores images in the database. That is, data stream storage of images. When uploading a file, we need to process the file as a database. When displaying the file, we need to process the data stream as a file.

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]:

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) gocreate procedure [dbo]. [usp_ImageStore_Insert] (@ Name [nvarchar] (50), @ MimeType [nvarchar] (50), @ 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] GOView Code

 

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 Entity above, one can refer to this: http://www.cnblogs.com/insus/p/4156735.html.
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.

Code source:

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

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:

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

The following shows how to complete the View. In the View, we first 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

Prepare the js Code for instant preview of the image:



In fact, this is from another slightly modified from, more reference: http://www.cnblogs.com/insus/p/4301179.html ready-made, ha ha, it is the continuous efforts to learn the results.

Display Data and dynamically generate tables:



In the above code example, #119 and #120 code, is to display the image, the base64 image, you can refer to the independent Demo: http://www.cnblogs.com/insus/p/3621199.html
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. One by one.

Insus. NET has been learning asp.net mvc for the past six months, but asp.net has also been involved, but it is relatively rare. Once you feel that the technology is mature, use asp.net mvc to implement the project. Work with you ......