ASP.NET Identity教程二：（用户管理3）用bootstrap上传插件上传头像
这个上传图片是每个系统 用得最多的，而BootstrapFileInput 的使用，对懂的人说非常简单，可对我却干了二天，真正的二天，还有高手帮助，因为网上的说明书全是残的，真的是残的。而我是菜鸟，不会看JS错误。现写下来。
一、实现原理
1.我在USER的字段中有一个headerPIC字段，是string类型，用于存放头像的url.
2.在前台通过上传图片到指定文件夹，我是放在'/Content/IPic'下面。然后后台再进行写入数据操作。
二、下载BootstrapFileInput 插件。
1.官方示范:http://plugins.krajee.com/file-advanced-usage-demo
2.下载后，将文件夹后面的--fileinput-master去掉，这样文件夹的样式为：
将这个文件夹Copy到网站的Contentg下面，再在Content上右键，将其包含进项目即可。
三、操作。
1.ViewModels下新建一个头像上传的模型。UploadHeader.CS
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace jsdhh2.ViewModels
{
public class UploadHeader
{
public string Id { get; set; } //取出来，因为要因此为索引
[Display(Name = "用户名")]
public string UserName { get; set; } //用户对每个用户的上传图片的改名。
[Display(Name = "头像")]
public virtual string HeaderPic { get; set; } //user表中的头像URL 字段
}
}
2.在UserController中进行头像上传的更改。因为我是从编辑个人资料那进入的，所以得在Edit的前台进行更改。
<a class="btn btn-primary" href="/User/List">返回</a>
@*@Html.ActionLink("上传头像", "~/User/UploadHeaderPic/"+Model.Id, new { @id = Model.Id }, new { @class = "btn btn-success" })*@
<a class="btn btn-success" href="/User/UploadHeaderPic/@Model.Id" >上传头像</a>
上面是我写的，使用UploadHeaderPic方法，同时@MODEL.ID作为参数。
3.UploadHeaderPic方法。在UserController分别增加get和POST方法。
///// <summary>
///// 上传头像
///// </summary>
// GET: Upload
[HttpGet]
public ActionResult UploadHeaderPic(string id)
{
if (string.IsNullOrWhiteSpace(id))
{
return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
}
User user = UserManager.FindById(id);
if (user == null)
{
return HttpNotFound();
}
var uploadHeader = new UploadHeader()
{
Id = user.Id,
UserName=user.UserName,
HeaderPic = user.HeaderPic
};
return View(uploadHeader);
}
///// <summary>
///// 上传头像
///// </summary>
//POST: Upload
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> UploadHeaderPic(string id, UploadHeader uploadHeader)
{
//int saveCount = 0; //定义变量
if (ModelState.IsValid && !string.IsNullOrEmpty(id))
{
User 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);
}
file.SaveAs(strFileSavePath + "/" +user.UserName+ strFileExtention); //保存文件:地址+用户名+扩展名,这样一个用户只能有一个图片。
user.HeaderPic = "/Content/IPic/" + user.UserName + strFileExtention; //给模型赋值
}
var result = await UserManager.UpdateAsync(user);
if (result.Succeeded)
{
return RedirectToAction("UploadHeaderPic/"+id, "User");
}
AddErrors(result);
}
return View(uploadHeader);
}
4.创建UploadHeaderPic的视图。这里出太多问题了，为了不出问题，我取消了布局。
1) s要注意上面的几个JS和CSS的引用先后顺序，错了就不正常。
<title>Krajee JQuery Plugins - © Kartik</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <link href="~/Content/bootstrap-fileinput/css/fileinput.css" rel="stylesheet" /> <script src="~/Content/bootstrap-fileinput/js/fileinput.js"></script>
2）我懒 得搞了，就还是网上的引用。
3.里面的方法显示种类很多，我只选了这一种单个文件的上传。
@model jsdhh2.ViewModels.UploadHeader
@{
Layout = null;
ViewBag.Title = "UploadHeaderPic";
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Krajee JQuery Plugins - © Kartik</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<link href="~/Content/bootstrap-fileinput/css/fileinput.css" rel="stylesheet" />
<script src="~/Content/bootstrap-fileinput/js/fileinput.js"></script>
</head>
<body>
<h2></h2>
<div class="container ">
@using (Html.BeginForm("UploadHeaderPic", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<h3>@Model.UserName 请上传您的头像！</h3><h2></h2>
<div class="col-md-3">
<img src="@Model.HeaderPic" width="100" height="100" />
</div>
<div class="col-md-5" style="height:300px;">
@Html.AntiForgeryToken()
@*<div class="form-group">
<img src="@Model.HeaderPic" class="col-md-2 control-label" width="100" height="100" />
</div>
<input id="file-0a" class="file" type="file" multiple data-min-file-count="1"> <br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>*@
<br>
<label class="control-label"><h4>请上传不大于 KB的图片。</h4></label>
<h2></h2>
<input id="input-41" name="input41[]" type="file" multiple class="file-loading">
<hr>
<button type="submit" class="btn btn-primary">上传</button>
<button type="reset" class="btn btn-default">清除</button>
<br />
@Html.ValidationSummary("", new { @class = "text-danger" })
</div>
}
</div>
<script>
$(document).on('ready', function () {
$("#input-41").fileinput({
maxFileCount: 10,
maxFileSize: 100, //文件不得大于100KB
allowedFileTypes: ["image"] //只能是image文件类型
});
});
</script>
</body>
</html>
6.实际效果。
浙公网安备 33010602011771号