Как перезагрузить изображение аватара и заменить изображение по умолчанию после отправки пользователем файла?- ASP.NET MVC

Question

У меня есть форма регистрации для ввода пользователем: аватара, имени, почты и т. Д. Изображение по умолчанию для аватара - это изображение пользователя. Как я могу обновить это изображение, чтобы оно стало новым аватаром, который пользователь отправляет в Интернет? Вот вид регистрации:

@model TimShop.Models.USERS
     using (Html.BeginForm("SignUp", "Account", FormMethod.Post, new { @class = "login100-form validate-form signUpForm" }))
        {

            @Html.AntiForgeryToken()
            <div class="container-login100">
                <div class="wrap-login100 signUpPageFlex">
                    <div class="login100-pic js-tilt" data-tilt="" style="will-change: transform; transform: perspective(300px) rotateX(0deg) rotateY(0deg);">

                            <img src="~/Content/images/img-01.png" alt="avatar" class="signUpImg">


                        <input type="file" name="file" id="uploadAvatar" class="fileImgUpload">
                        <label for="uploadAvatar">
                            <i class="fa fa-upload"></i> Upload your avatar
                        </label>
                    </div>


                    <span class="login100-form-title signUpFormTitle">
                       Member resgiteration
                    </span>
                    <div class="wrap-input100 validate-input">
                        @Html.EditorFor(model=>model.FULLNAME, new { htmlAttributes = new { @class= "input100 SignUpInput", @required = "true", placeholder = "Full name", name= "fullname" } } )
                        <span class="focus-input100"></span>
                    </div>
                    <div class="wrap-input100 validate-input">
                        @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "input100 SignUpInput", @required = "true", placeholder = "Email", name = "email" } })
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input">
                        @*<input class="input100 SignUpInput" type="password" name="pass" placeholder="Password">*@
                        @Html.PasswordFor(model => model.PASS, new { htmlAttributes = new { @class = "input100 SignUpInput", @required = "true", placeholder = "Password", name = "pass" } } )
                        <span class="focus-input100"></span>
                    </div>
                    <div class="wrap-input100 validate-input">

                        @Html.Password("confirmPass", new { htmlAttributes = new { @class = "input100 SignUpInput", @required = "true", placeholder = "Confirm password", name = "passConfirm" } })
                        <span class="focus-input100"></span>
                    </div>
                    <div class="wrap-input100 validate-input">
                        @Html.EditorFor(model => model.DATEOFBIRTH, new { htmlAttributes = new { @class = "input100 SignUpInput", @required = "true", placeholder = "Date of birth", @type="date", name = "dob" } })
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input">
                        @Html.EditorFor(model=>model.PHONE, new { htmlAttributes = new { @class = "input100 SignUpInput", @required = "true", placeholder = "PHONE", @type = "number", name = "phone" }  } )
                        <span class="focus-input100"></span>
                    </div>

                    <div class="container-login100-form-btn container-signUp-form">
                        <input class="login100-form-btn signUpbutton" type="submit" value="COMPLETE"/>
                    </div>

                </div>
            </div>
        <!-- Body signUp end -->
        }

И мой контроллер, который обрабатывает процесс регистрации:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult SignUp([Bind(Include = "FULLNAME,PASS,EMAIL,DATEOFBIRTH,PHONE,AVATAR")] USERS user, string confirmPass, HttpPostedFileBase file)
        {
            bool error = false;

            try
            {
                // TODO: Add insert logic here

                if (db.USERS .Where(m => m.EMAIL == user.EMAIL).Any())
                {
                    ViewData["insertResult"] = "This email is already taken.";
                }
                else
                    {
                     if(file != null)
                        {
                        file.SaveAs(HttpContext.Server.MapPath("~/Content/images/users/") + file.FileName);
                        user.AVATAR= file.FileName;

                    }else
                    {
                        user.AVATAR = "";
                    }
                    db.USERS.Add(user);
                    db.SaveChanges();
                    Session["account"] = user.FULLNAME;
                    return RedirectToAction("Success", "Home", new { displayText = "Successful registeration" });
                }
            }
            catch
            {
                ViewData["insertResult"] = "Cannot register your account. Please check again";
            }
            return View();
        }

Или вы можете увидеть изображение, которое описывает мою идею, чтобы быть ясным: Моя идея

Answer 1

Вы должны написать некоторый javascript в вашем коде вида, как показано ниже:

<script type="text/javascript">
function onChange(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#signUpImg').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#uploadAvatar").change(function(){
    onChange(this);
});

Теперь измените код изображения части вида, как показано ниже:

 <img src="~/Content/images/img-01.png" alt="avatar" id = "signUpImg" class="signUpImg">

Надеюсь, это поможет вам!