时间戳

首页 > 解决方案 > 用户推送文件后如何重新加载头像并替换为默认图片？- ASP.NET MVC

c# - 用户推送文件后如何重新加载头像并替换为默认图片？- ASP.NET MVC

问题描述

我有一个注册表单供用户输入：头像、姓名、邮件等...头像的默认图像是用户图像，我如何将此图像更新为用户推送的新头像网络？这是注册视图：

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

或者你可以看到描述我的想法的图像很清楚：我的想法

标签： c#asp.net-mvcreload

解决方案

您必须在您的视图代码中编写一些 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">

希望对你有帮助！

推荐阅读