how to send upload control data to jquery ajax wihout plugins

Question

I am trying to upload file/files to server through Ajax request in MVC, but the file is always returning null in the controller, can you please suggest the way to pass the file data in the ajax request?

<form method="post" enctype="multipart/form-data">
<div>
    @Html.AntiForgeryToken()
    <input type="file" name="file" id="files" multiple><br>
    <input type="button" value="Upload File to Server" id="submit">
</div>
</form>

<script type="text/javascript">
$("#submit").click(function () {
        var formData = $('#files').val();
        alert(formData);
        $.ajax({
            url: 'home/index',
            type: 'POST',
            datatype: 'json',
            enctype: "multipart/form-data",
            data: { file: formData },
            //processData: false, // Don't process the files
            //contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function (data) {
                alert(data);
            },
            error: function () {
                alert("failed");
            }
        });
    });
</script>


[HttpPost]
    [ActionName("Index")]
    public ActionResult Index_Post(HttpPostedFileBase file)
    {
        string errormsg = string.Empty;
        if (file != null)
        {
            // Verify that the user selected a file
            if (file != null && file.ContentLength > 0)
            {
                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // TODO: need to define destination
                var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                try
                {
                    file.SaveAs(path);
                    errormsg = "uploaded";
                    return Json(fileName + errormsg);
                }
                catch
                {
                    errormsg = "failed to upload";
                    return Json(fileName + errormsg);
                }
            }
        }

        else
        {
            errormsg = "No file selected";
            return Json(errormsg);
        }
        return View();
    }   
}

Answer 1

Take normal button instead of submit button and try below code

 $("#submit").click(function () {
                var formData = new FormData();
                var opmlFile = $('#myFile')[0];
                formData.append("opmlFile", opmlFile.files[0]);

                $.ajax({
                url: 'home/index',
                type: 'POST',
                datatype: 'json',
                enctype: "multipart/form-data",
                data:  formData ,
                //processData: false, // Don't process the files
                //contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    alert("failed");
                }
            });
            });
        });

and controller action :-

[HttpPost]
    [ActionName("Index")]
    public HttpResponseMessage Index()
        {
            HttpResponseMessage result = null;
            var httpRequest = HttpContext.Current.Request;

            // Check if files are available
            if (httpRequest.Files.Count > 0)
            {
                var files = new List<string>();

                // interate the files and save on the server
                foreach (string file in httpRequest.Files)
                {
                    var postedFile = httpRequest.Files[file];
                    var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName);
                    postedFile.SaveAs(filePath);

                    files.Add(filePath);
                }

                // return result
                result = Request.CreateResponse(HttpStatusCode.Created, files);
            }
            else
            {
                // return BadRequest (no file(s) available)
                result = Request.CreateResponse(HttpStatusCode.BadRequest);
            }

            return result;
        }