Step 1: Open Visual Studio and click File=> New=> Project.

1

Step 2: Now, select ASP.NET Web Application. Then create Project name. Here our project name is “FileUploadMVC” and then click on OK button.

2

Step 3: Select the MVC template, then click on OK Button.

3

Step 4: Now you need to create Controller. So first of all you will right click on Controller folder, then add Controller.

4

Step 5: Here select the Empty MVC 5 Controller.

Click add button.

5

Step 6: Here I have added “AsynFileUpload” Action into “UploadFile” Controller.

Controller section code

  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7. namespace FileUploadMVC.Controllers {
  8. public class UploadFileController: Controller {
  9. // GET: Upload
  10. public ActionResult AsynFileUpload() {
  11. return View();
  12. }
  13. [HttpPost]
  14. [ValidateAntiForgeryToken]
  15. public ActionResult AsynFileUpload(IEnumerable < HttpPostedFileBase > files) {
  16. int count = 1;
  17. if (files != null) {
  18. foreach(var file in files) {
  19. if (file != null && file.ContentLength > 0) {
  20. var fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
  21. var path = Path.Combine(Server.MapPath("~/UploadedFiles"), fileName);
  22. file.SaveAs(path);
  23. count++;
  24. }
  25. }
  26. }
  27. return new JsonResult {
  28. Data = "Successfully " + count + " file(s) uploaded"
  29. };
  30. }
  31. }
  32. }
6

Step 7. Now right click on “Actions Method” in Controller section. Then add view.

7

Step 8: In this section , I used jQuery code to upload the file to the server.
  1. @ {
  2. ViewBag.Title = "FileUpload";
  3. } < h2 > AsynFileUpload < /h2>
  4. @using(Ajax.BeginForm("AsynFileUpload", "UploadFile", new AjaxOptions() {
  5. HttpMethod = "post"
  6. }, new {
  7. enctype = "multipart/form-data"
  8. })) {
  9. @Html.AntiForgeryToken() < input type = "file"
  10. name = "file"
  11. id = "ful" / > < input type = "submit"
  12. value = "upload file" / >
  13. } < div class = "progress" > < div class = "progress-bar" > 0 % < /div> < /div> < div id = "status" > < /div> < style > .progress {
  14. position: relative;
  15. width: 450 px;
  16. border: 1 px solid# ddd;
  17. padding: 1 px;
  18. }.progress - bar {
  19. width: 0 px;
  20. height: 30 px;
  21. background - color: green;
  22. } < /style>
  23. @section scripts { < script src = "http://malsup.github.com/jquery.form.js" > < /script> < script > (function() {
  24. var bar = $('.progress-bar');
  25. var percent = $('.progress-bar');
  26. var status = $('#status');
  27. $('form').ajaxForm({
  28. beforeSend: function() {
  29. status.empty();
  30. var percentValue = '0%';
  31. bar.width(percentValue);
  32. percent.html(percentValue);
  33. },
  34. uploadProgress: function(event, position, total, percentComplete) {
  35. var percentValue = percentComplete + '%';
  36. bar.width(percentValue);
  37. percent.html(percentValue);
  38. },
  39. success: function(d) {
  40. var percentValue = '100%';
  41. bar.width(percentValue);
  42. percent.html(percentValue);
  43. $('#fu1').val('');
  44. alert(d);
  45. },
  46. complete: function(xhr) {
  47. status.html(xhr.responseText);
  48. }
  49. });
  50. })(); < /script>
  51. }
Output

Click on Choose File button and select the file.

output1
Here our file successfully uploaded.

output2