Asp.net mvc file upload, asp. netmvc

Asp.net mvc file upload, asp. netmvc

Code download: http://files.cnblogs.com/n-pei/mvcfileupload.zip

Recently, because TeamVideo needs to use the video and image upload functions, I tried to share a lot of information with you.

　　1. Basic File Upload

In the View Interface, the data is POST to the Controller through Form, and the Controller stores the file to the server, and then Redirect to other pages.

View code:

The Controller part needs to determine whether there are Post files, save the files, and redirect to the index page.

The above example is the simplest. Next we will consider adding a jQuery UI to it so that the file will be uploaded as follows:

To achieve this, you must first download several jQuery UI plug-ins.

Add these scripts to the template:

Upload the simple file implemented above to a DIV. The function we need to implement is that when you click a button, the DIV will pop up.

Finally, the script popped up by DIV:

Next, we want to upload the image to the server and then display it on the current page. The result is as follows:

That is to say, after uploading an image to the server, we need to obtain the image creation time, size name, and so on.

FileRepository:

Pass the List to the View through the Controller section. See the attachment for the View code. For Image Storage, I want to store it in the database. First, create a table structure:

Use ADO. NET Data Model to store Data, so we need to create an edmx file.

Save the image to the Controller section of the database:

View code:

The process is as follows:

Here we need a helper class to help input text Post. You can see in the downloaded code. Upload images and save them to the database. We also need to display the images, which is relatively troublesome. The search method is as follows:

The query result after saving the image to the database:

Currently, I do not know how to display a List of images. Who can provide a good solution. There have been many introductions on traditional methods to store files (images. How can I use AJAX to store files to the server? I searched and found that many of them were implemented using the jQuery Form plug-in.

You need to download the jQuery Form plug-in and put it in your Script folder. And add it to the Master template. When you click the Button, create a Form and POST it to the server using AJAX to save it. The Save method is not mentioned. The following is the JS Code using jQuery Form:

In addition to using the jQuery form plug-in, there are other AJAX methods to upload files:

Here are two examples:

　　1. upload files using jQuery & Flash AJAX

Address: http://swfupload.googlecode.com/

It mainly post data to the Controller in the background through Flash and js interaction using the flash program. In addition to the flash part, the other parts are similar to the code described above. I will put this part of code in the code package for you to download.

Effect:

　　2. upload files using jQueryAJAX onlyHttp://valums.com/ajax-upload)

We recommend that you take a look at this.

Colleagues who read this article have a good weekend.

References:

Http://weblogs.asp.net/imranbaloch/archive/2010/04/03/image-preview-in-asp-net-mvc.aspx

Http://weblogs.asp.net/jgalloway/archive/2008/01/08/large-file-uploads-in-asp-net.aspx

Http://www.highoncoding.com/Articles/689_Uploading_and_Displaying_Files_Using_ASP_NET_MVC_Framework.aspx

Http://www.mikesdotnetting.com/Article/125/ASP.NET-MVC-Uploading-and-Downloading-Files

Http://valums.com/ajax-upload/