双击新增图片

我们在新增的时候，不单单止新增文本数据，有时候还会新增图片
例

双击先选择图片，然后打开文件夹供你选择图片，选择后进行保存，那这个功能是怎么实现的呢

首先我们给input标签的图片添加一个id: studentPicture
给文件选择添加一个id: upImage
在样式一板,先给新增学生信息加上一个属性：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲studentPicture"…("#upImage").val(null);

点击图片获取input标签：$("#studentPicture").dblclick(function () {
$("#upImage").click();
});
点击图片，获取input标签 获取后change改变值 读取图片
$("#upImage").change(function () {
//获取出文件选择器中的第一个文件
var files = this.files[0];//this代表upImage
console.log(files);//输出
//判断文件选择类型
if (regexImageFilter.test(files.type)) {//正则表达式里面有一个test方法 可以检测文件都类型 type就是控制器输出里面的类型
//读取文件转成Url
fileReader.readAsDataURL(files);
} else {
layer.alert(“请选择图片”)
}
});

这个事件在读取完的时候去触发他
读取完就要把图片数据绑定到图片上面
fileReader.onload = function (event) {//even事件对象
//console.log(event.target.result);
$("#studentPicture").attr(“src”, event.target.result);
//attr的方法 添加属性和属性值 属性scr
}

在控制器
新增的判断中
有两个注意点

1. 检查目录是否存在
   if (!Directory.Exists(Server.MapPath("~/Document/studentPicture/"))){
   //.MapPath.MapPath传入一个虚拟路径，返回物理路径
   Directory.CreateDirectory(Server.MapPath("~/Document/studentPicture/"));//CreateDirectory创建目录
   }
   2.判断是否上传了文件
   if (upImage != null && upImage.ContentLength > 0)
   { //获取文件的扩展名
   string strEx = Path.GetExtension(upImage.FileName);
   //生成一个新的文件名
   string fileName = DateTime.Now.ToString(“yyyyMMddHHmmssffff”) + “_” +Guid.NewGuid().ToString() + strEx;
   //文件路径
   string filePath = Server.MapPath("~/Document/studentPicture/") + fileName;
   //将上传的文件保存到了指定的路径(物理路径)下面
   upImage.SaveAs(filePath);
   //将文件名 保存在pictureName字段中
   Student.pictureName = fileName;
   //保存到数据库
   //二进制数组大小就文件大小
   byte[] imageBytes = new byte[upImage.ContentLength];
   //读取流到二进制数组 byte数组，开始位置，结束位置
   upImage.InputStream.Read(imageBytes, 0, upImage.ContentLength);
   //保存到对象
   Student.picture = imageBytes;
   }