After answering a question on stackoverflow I realized uploading files with ajax was something everyone was looking for.

So to commemorate the asp.net-mvc badge I won recently I'm writing a full example of how to do this with asp.net-mvc.

I'll use the uploadify jquery plugin. There are many others you can use too.

So all in all it's pretty simple. We'll create something that looks like this:

It allows you to select multiple files, uploads them asynchronously. Then appends a link to the file, assuming it's an image.

I uploaded a picture of my Arduino Starter Kit :)

How to :

1. Create a new asp.net mvc4 web application.
2. Delete the Index.cshtml page under \View\Home\.
3. Open HomeController.cs and Right Click the Index() method.
4. Click Add View, and uncheck Use a Layout or Master Page.

Create an upload method like the following code snippet. Your home controller should look like this:

Note : Uploadify names the file it sends as 'Filedata'.

For the view it should look like this:

Note : I had to change the css in uploadify.css, line 74 to point to the uploadify-cancel.png correctly.

74:   background: url('../Content/uploadify-cancel.png') 0 0 no-repeat;

And that's it!!! I have a full sample you can download here.