用户推送文件后如何重新加载头像图像并替换默认图片? - 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">

希望这对您有所帮助！