2018教程之mvc+ef之四：Identity用户管理之编辑用户上传头像

这前面的，我感觉全是管理员使用的，他有所有管理权限，当然最后也有用户自己登录，进行头像上传的。

一，模型

using System.ComponentModel.DataAnnotations;

namespace MYtest2018.ViewModels
{
	public class UploadHeader
	{
		public string Id { get; set; }
		[Display(Name = "真实姓名")]
		public string RealName { get; set; }
		[Display(Name = "头像")]
		public virtual string HeaderPic { get; set; }






	}
}

　　

 

一、后台方法

 我使用的是inspinia的上传样式，因为我又使用的SEED，不是FULL版本，先将FULL中的script中的plugins和app全部COPY到项目中，先取消包含，再全部包含 到项目中。

 

		/////// <summary>
		/////// 上传头像
		/////// </summary>
		//// GET: Upload
		[HttpGet]
		///[Authorize]
		public ActionResult UploadHeaderPic(string id)
		{
			if (string.IsNullOrWhiteSpace(id))
			{
				return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
			}
			ApplicationUser user = UserManager.FindById(id);
			if (user == null)
			{
				return HttpNotFound();
			}
			var uploadHeader = new UploadHeader()
			{
				Id = user.Id,
				HeaderPic = user.HeaderPic,
				RealName=user.RealName
			};

			return View(uploadHeader);
		}

		/////// <summary>
		/////// 上传头像
		/////// </summary>
		////POST: Upload
		[HttpPost]
		//[Authorize]
		[ValidateAntiForgeryToken]
		public async Task<ActionResult> UploadHeaderPic(string id, UploadHeader uploadHeader)

		{
			//int saveCount = 0; //定义变量

			if (ModelState.IsValid && !string.IsNullOrEmpty(id))
			{
				ApplicationUser user = UserManager.FindById(id);
				var files = Request.Files;
				if (files.Count > 0)
				{
					var file = files[0];
					string strFileSavePath = Request.MapPath("~/Content/IPic");  //定义上传地址
					string strFileExtention = Path.GetExtension(file.FileName);
					if (!Directory.Exists(strFileSavePath))
					{
						Directory.CreateDirectory(strFileSavePath);
					}
					///这种方式，上传的为username+扩展名，相当于覆盖以前的图片
					file.SaveAs(strFileSavePath + "/" + user.RealName + strFileExtention);   //保存文件
					user.HeaderPic = "/Content/IPic/" + user.RealName + strFileExtention;   //给模型赋值

				}


				var result = await UserManager.UpdateAsync(user);
				if (result.Succeeded)
				{
					return RedirectToAction("UploadHeaderPic/" + id, "Account");
				}
				AddErrors(result);
			}
			return View(uploadHeader);


		}

　三、前台

@model MYtest2018.ViewModels.UploadHeader
@{
	ViewBag.Title = "UploadHeaderPic";
	Layout = "~/Views/Shared/_Layoutadmin.cshtml";
}
 
<link href="~/Content/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet" />
<!-- Add jQuery Style direct - used for jQGrid plugin -->
 
 @using (Html.BeginForm("UploadHeaderPic", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
 {

	@Html.AntiForgeryToken()
<div class="wrapper wrapper-content animated fadeIn">
	 <div class="row">
		<div class="col-lg-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>请Select file 上传您的头像！（图片要为正方形哟）</h5>
					<div class="ibox-tools">
						<a class="collapse-link">
							<i class="fa fa-chevron-up"></i>
						</a>

					</div>
				</div>
				<div class="ibox-content">
					<div class="fileinput fileinput-new input-group" data-provides="fileinput">
						<div class="form-control" data-trigger="fileinput">
							<i class="glyphicon glyphicon-file fileinput-exists"></i>
							<span class="fileinput-filename"></span>
						</div>
						<span class="input-group-addon btn btn-default btn-file">
							<span class="fileinput-new">Select file</span>
							<span class="fileinput-exists">Change</span>
							<input type="file" name="..." />
						</span>
						<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
					</div>
					<div class="text-right"><button type="submit" class="btn btn-primary">上传头像</button></div>
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5> <span class="text-navy">“@Html.DisplayFor(m => m.RealName) ”</span>上传头像哟！！</h5>
					<div class="ibox-tools">
						 

					</div>
				</div>
				<div class="ibox-content">
					<img src=@Html.DisplayFor(m => m.HeaderPic) alt="头像" class="img-circle" height="72" width="72">
				</div>
			</div>
		
		</div>
	


	</div>

</div>
 }
   @section Scripts {
 
 
<!-- Handler for local scripts -->
<script src="~/Scripts/plugins/jasny/jasny-bootstrap.min.js"></script>
 


<script type="text/javascript">
        Dropzone.options.dropzoneForm = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 0.5, // MB
            dictDefaultMessage: "<strong>Drop files here or click to upload. </strong></br> (This is just a demo dropzone. Selected files are not actually uploaded.)"
        };

        $(document).ready(function () {

            var editor_one = CodeMirror.fromTextArea(document.getElementById("code1"), {
                lineNumbers: true,
                matchBrackets: true
            });

            var editor_two = CodeMirror.fromTextArea(document.getElementById("code2"), {
                lineNumbers: true,
                matchBrackets: true
            });

            var editor_two = CodeMirror.fromTextArea(document.getElementById("code3"), {
                lineNumbers: true,
                matchBrackets: true
            });

        });
</script>

	   
	   
	   
	   
	   }

　　

四，效果