Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
26 Feb
2021

How to upload Image file using AJAX and jquery

by Shubham Batra

5105

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);
        }

  • |
  • How to upload Image file using AJAX andjQuery , upload Image file using AJAX and jquery , Ajax call , file upload using ajax , file uploading using ajax and jquery

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier