upload file asynchronously with Jquery

To upload file asynchronously with Jquery use below steps:

step 1 In your project open Nuget manager and add package (jquery fileupload(only you need to write it in search box it will come up and install it.)) URL: https://github.com/blueimp/jQuery-File-Upload

step 2 Add below scripts in the HTML files, which are already added to the project by running above package:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

step 3 Write file upload control as per below code:

<input id="upload" name="upload" type="file" />

step 4 write a js method as uploadFile as below:

 function uploadFile(element) {                $(element).fileupload({                    dataType: 'json',                  url: '../DocumentUpload/upload',                  autoUpload: true,                  add: function (e, data) {                               // write code for implementing, while selecting a file.                     // data represents the file data.                     //below code triggers the action in mvc controller                    data.formData =                                      {                                       files: data.files[0]                                      };                    data.submit();                  },                  done: function (e, data) {                               // after file uploaded                  },                  progress: function (e, data) {                       // progress                  },                  fail: function (e, data) {                       //fail operation                  },                  stop: function () {                      code for cancel operation                  }              });            };

step 5 In ready function call element file upload to initiate the process as per below:

$(document).ready(function()  {      uploadFile($('#upload'));    });

step 6 Write MVC controller and Action as per below:

public class DocumentUploadController : Co  ntroller      {                   [System.Web.Mvc.HttpPost]          public JsonResult upload(ICollection<HttpPostedFileBase> files)          {              bool result = false;                if (files != null || files.Count > 0)              {                  try                  {                      foreach (HttpPostedFileBase file in files)                      {                          if (file.ContentLength == 0)                              throw new Exception("Zero length file!");                                                 else                               //code for saving a file                        }                  }                  catch (Exception)                  {                      result = false;                  }              }                  return new JsonResult()                  {                      Data=result                  };              }        }