图片的上传与保存

1. 先找到数据库的用户表点击设计添加 picture 字段与 nvarchar 数据类型
   

2.更新数据模型，先找到 S_User 表删除，然后再从数据库更新模型并保存

3.先在视图上写出图片上传与保存需要的页面
3.1 { title: ‘头像’, templet: customUserPicture },//头像
3.2

@* ###隐藏的文件选择框，用于弹出用户头像选择 accept 由于筛选 图片*@ 3.3

在控制器上添加

3.4
自定义列用户头像
查看按钮（显示图片）
function openUserPicture(picture)
{
图片路径
var pictureUrl = ‘@Url.Content("~/Document/userPicture/")’ + picture;

layer.open({
type: 1,// 页面层
title: false,//关闭标题closeBtn: 0,//不显示关闭按钮
shadeClose: true,//点击遮罩层关闭弹窗
content: img //弹窗显示内容
});
}
图片双击事件（点击 input type =file）
function showImageSelectDialog()
{
使用 jqury 触发文件选择框的点击事件
$("#userPictureFile").click();
3.5 图片路径
var pictureUrl = ‘@Url.Content("~/Document/userPicture/")’ + data.picture;
$("#userPicture").attr(“src”, pictureUrl);
//======####用户头像
var userPicture = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲userPictureFile…/i;
文件选择控件改变事件 – 将选择的图片显示到 img 元素
function loadImgToImg()
{
选取选择图片
var imgfFile = $("#userPictureFile").get(0).files[0];
//console.log(imgfFile);
if (regexImageFilter.test(imgfFile.type)) {
使用 FileReader 读取图片并转为 URL
imgReader.readAsDataURL(imgfFile);
}
else {
alert(“选择的不是一个有效的图片文件”);
}
}
文件读取 onload 事件，将读取到图片显示的到 Img 元素
imgReader.onload = function (evt) {
console.log(evt);
$("#userPicture").attr(“src”, evt.target.result);
}