Update Image From on change Event jQuery

 

jQuery Code Given Below :- 

 <script type="text/javascript">

        function showimagepreviewnew(input) {

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

                var filerdr = new FileReader();

                filerdr.onload = function (e) {

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

                    debugger;

                    // start

                    var data = new FormData();

                    var Idd = $('#Id').val();

                    var files = $("#fileupload").get(0).files;

                    if (files.length > 0) {

                        data.append("UserImg", files[0]);

                        data.append("Idd", $('#Id').val());

                    }

                    $.ajax({

                        url: "/Account/UploadFile",

                        type: "POST",

                        processData: false,

                        contentType: false,

                        data: data,

                        success: function (response) {

                            //code after success

                            $("#filenameId").val(response);

                            $("#imgPreview").attr('src', '/UserImg/' + response);

                        },

                        error: function (er) {

                            alert(er);

                        }

                    });

                    //end

                }

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

            }

        }

    </script>

html code given below :-

  <div class="user-profile me-3">

                        <form action="#" id="sublform">

                            <input type="hidden" id="Id" name="Id" value="@Model.Registration.Id" />

                            @if (Model.Registration.Pic != "" || Model.Registration.Pic != null)

                            {

                                <img src="@Model.Registration.Pic" alt="" id="imgprvw" />

                            }

                            else

                            {

                                <img src="~/UserImg/2.jpg" alt="" id="imgprvw" />

                            }

                            <input type="hidden" id="filenameId" name="filenameId" />

                            <input class="form-control" type="file" name="fileupload" id="fileupload" onchange=" showimagepreviewnew(this); ">

                        </form></div>

CS Code Given Below :- 

  // Update Profile Image  UpdateImage FormCollection coll

        [AcceptVerbs(HttpVerbs.Post)]

        public JsonResult UploadFile()

        {

            string myid = Request.Form["Idd"];   

            Guid Id = Guid.Empty;

            Guid.TryParse(myid, out Id);

            string _imgname = string.Empty;

            if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())

            {

                SqlCommand cmdc = new SqlCommand("Select Pic from [Registration] where Id='" + Id + "'", con);

                cmdc.Parameters.AddWithValue("@Id", Id);

                SqlDataAdapter da = new SqlDataAdapter(cmdc);

                DataTable dt = new DataTable();

                da.Fill(dt);

                SqlCommand cmd = new SqlCommand("Update [Registration] set Pic=@Pic where Id='" + Id + "'", con);

                var pic = System.Web.HttpContext.Current.Request.Files["UserImg"];

                if (pic.ContentLength > 0)

                {

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

                    var _ext = Path.GetExtension(pic.FileName);

                    string proimage = "../UserImg/" + fileName;

                    cmd.Parameters.AddWithValue("@Pic", proimage);

                    //_imgname = Guid.NewGuid().ToString();

                    var _comPath = Server.MapPath("/UserImg/") + fileName;

                    _imgname = "UserImg/" + fileName;

                    ViewBag.Msg = _comPath;

                    var path = _comPath;

                    // Saving Image in Original Mode

                    pic.SaveAs(path);

                    // resizing image

                    MemoryStream ms = new MemoryStream();

                    WebImage img = new WebImage(_comPath);

                    if (img.Width > 200)

                        img.Resize(200, 200);

                    img.Save(_comPath);

                    // end resize

                    cmd.Parameters.AddWithValue("@Id", Id);

                    con.Open();

                    cmd.ExecuteNonQuery();

                    con.Close();

                }

            }

            return Json(Convert.ToString(_imgname), JsonRequestBehavior.AllowGet);

        }