How to upload Image file using AJAX and jquery

Ajax 

So starting of from the beginning Ajax is used for Asynchronous Javascript and XML. We can use it for many purposes. Few basic uses of Ajax are:-

• Update page without reloading the page providing better performance.
• Request data from a server - after the page has loaded which can be used in loading Partial Views.
• Send data to a server without reload - in the background making it easier to performance Save, Delete operations smoothly.

Ajax in Asp.Net MVC

Ajax can be used anywhere where we can use jquery. So you have seen various ways of using Ajax in our previous article  Using Ajax in Asp.Net MVC. But posting fileupload files becomes a little complicated with Ajax.So we will learn How to upload Image file using AJAX and jquery. So let's start from beginning:-

Step-1

So you have to add a fileupload filed on your view and now we will make some changes in Ajax to post that file on controller. We have also kept the three textboxes for some dummy data.

So for posting files and other data we have to send data by adding to formdata.

FormData is introduced to allow developers to build forms objects dynamically (and can even include files from the user's file system), and then to send this form object via AJAX.

So we will create a new formdata object and than add all the required values in that formdata using formdata.append. You will also add the file here . Remember to use the same keys which you have used on controller to receive tha data.

One thing to remember here is you have to use contenttype false which was json in previous methods we have seen in last article.And also set processdata to false

    $(function () {
        $("#btnGet6").click(function () {
            var formData = new FormData();
            var empIds = $("#txtId").val();
            var empNames = $("#txtName").val();
            var empSalarys = $("#txtSalary").val();
            var totalFiles = document.getElementById("FileUpload").files.length;
            debugger;
            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById("FileUpload").files[i];
                formData.append("fileUpload", file);
                formData.append("empId", empIds);
                formData.append("empName", empNames);
                formData.append("empSalary", empSalarys);
            }
            $.ajax({
                type: 'post',
                url: '/Home/AjaxMethodFileUpload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    debugger;
                    alert("Hello: " + response.EmpName + " Your Employee Id Is: " + response.EmpId + " Your Salary Is: " + response.EmpSalary + " And Your File Name Is: " + response.File);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    });

On the controller side we have to using same way like we have used earlier for first three parameters. Like giving same name which we have added in formdata. And then we will use a parameter of type of HttpPostedFileBase to receive the file.You will get you file in this parameter. Also you can get the file in Request.Files. So this is how you can get your file posted in mvc.

 
        [HttpPost]
        public JsonResult AjaxMethodFileUpload(string empId, string empName, string empSalary, HttpPostedFileBase fileUpload)
        {
            PersonModel personModel = new PersonModel
            {
                EmpId = empId,
                EmpName = empName,
                EmpSalary = empSalary,
                File = fileUpload.FileName
            };
            return Json(personModel);
        }