Upload Image using Api and jquery and preview

<img id="imgDisplay" src="~/Images/Image_Placeholder.png" alt="your image" style="width: 100px; height: 100px" />

$(document).ready(function () {

    function readURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {

                $('#imgDisplay').attr('src', e.target.result);

            }

            reader.readAsDataURL(input.files[0]);

        }

    }

    $("#file").change(function () {

        readURL(this);

    });

});

<form action="">

  Select Your Files:

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

  <input id="btUpload" type="button" value="Upload File" />

</form>

$(document).ready(function () {

    $("#btUpload").click(function () {

        var r =  $('form')[0];

        var data = new FormData($('form')[0]);

        data.append('ImgName', $("#hdn_Branch_Id").val());

        $.ajax({

            type: "POST",

            url: '/api/ApiImageUpload/',    // CALL WEB API TO SAVE THE FILES.

            enctype: 'multipart/form-data',

            contentType: false,

            processData: false,         // PREVENT AUTOMATIC DATA PROCESSING.

            cache: false,

            data: data,                   // DATA OR FILES IN THIS CONTEXT.

            success: function (data, textStatus, xhr) {

                $('p').text(data);

            },

            error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert(textStatus + ': ' + errorThrown);

            }

        });

    });

});

//=======API

[HttpPost()]

public string UploadFiles()

        {

            int iUploadedCnt = 0;

            // DEFINE THE PATH WHERE WE WANT TO SAVE THE FILES.

            string sPath = "";

            sPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Images/Student_Pic/");

           var hfc1 = System.Web.HttpContext.Current.Request.Params;

            var df = hfc1["ImgName"];

            System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;

            // CHECK THE FILE COUNT.

            for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++)

            {

                System.Web.HttpPostedFile hpf = hfc[iCnt];

              

               Path.ChangeExtension(sPath + Path.GetFileName(hpf.FileName), ".Jpeg");

                if (hpf.ContentLength > 0)

                {

                    // CHECK IF THE SELECTED FILE(S) ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE)

                    if (!File.Exists(sPath + Path.GetFileName(hpf.FileName)))

                    {

                        // SAVE THE FILES IN THE FOLDER.

                        hpf.SaveAs(sPath + Path.GetFileName(hpf.FileName)+".png");

                       // hpf.SaveAs(Path.ChangeExtension(sPath + Path.GetFileName(hpf.FileName), ".Jpeg"));

                        iUploadedCnt = iUploadedCnt + 1;

                    }

                }

            }

            // RETURN A MESSAGE.

            if (iUploadedCnt > 0)

            {

                return iUploadedCnt + " Files Uploaded Successfully";

            }

            else

            {

                return "Upload Failed";

            }

        }