How to upload a Image in Asp.net MVC using Ajax request

Question

How to upload a Image in Asp.net MVC using Ajax request I have single controller and its view file have to use Ajax request.

Index Controller

public ActionResult Index()
{
     return View();
}

and its view

Answer 1

Textbox with id="imageUploadForm"

<input type="file" id="imageUploadForm"  name="image" multiple="multiple" />

Ajax function

 $(document).ready(function() {
       $("#imageUploadForm").change(function() {
         var formData = new FormData();
         var totalFiles = document.getElementById("imageUploadForm").files.length;
         for (var i = 0; i < totalFiles; i++) {
           var file = document.getElementById("imageUploadForm").files[i];
           formData.append("imageUploadForm", file);
         }
         $.ajax({
           type: "POST",
           url: '/Home/Upload',
           data: formData,
           dataType: 'json',
           contentType: false,
           processData: false
             //success: function(response) {
             //    alert('succes!!');
             //},
             //error: function(error) {
             //    alert("errror");
             //}
         }).done(function() {
           alert('success');
         }.fail(function( xhr, status, errorThrown ) {
             alert('fail');
           };
         });
       });

Controller Function

      [HttpPost]
        public void Upload()
        {

if(Request.Files.Count != 0){

            for (int i = 0; i < Request.Files.Count; i++)
            {
                var file = Request.Files[i];

                var fileName = Path.GetFileName(file.FileName);

                var path = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
                file.SaveAs(path);
            }

        }

}