图片上传

图片上传
*图片上传—>本质是文件上传
*在数据库里面用户添加项，列名：picture，数据类型：nvarchar(100)。
*为什么不用二进制呢？
因为我们一般不会把图片直接添加到数据库，而是把图片的（路径）名称保存到磁盘里面，然后把文件保存的（路径）名称保存到数据库里面。
*直接把图片放进数据库会有什么后果？
图片占据的内存大（小），会影响查询的速度，影响程序运行的性能。
①创建一个上传文件（图片）的框架

角色 * 头像 //筛选图片的条件： 图21 

1·区别
1.1·筛选后结
图22

1.2·没筛选的结果
图23

       </tr>

②文件容器，用来存放上传的图片
@* 文件选择控件 隐藏 *@

③文件读取器（读取文件）
var imageReader = new FileReader();

④双击图片 触发 文件输入框的点击事件（触发得的是上面文件选择）
function showImageSelectDialog() {
$("#userPictureFile").click();
}
⑤ 文件读取器onload事件 在读取文件完成后触发的事件
imageReader.onload = function (evt) {
console.log(evt);
$("#userPicture").attr(“src”, evt.target.result);
}
⑥文件输入框改变事件，改变时读取图片
function loadImgToImg() {
//获取文件输入框里面的文件
var file = $("#userPictureFile").get(0).files[0];
⑦-1判断读取的文件是不是需要的文件类型
console.log(file.type);
if (regexImageFilter.test(file.type)) {
//使用文件读取器读取文件，并把文件转为URL(并不是真正的URL而是Base64编码)
imageReader.readAsDataURL(file);
} else {
//判断选择的图片（文件）是不是有效的
alert(“选择的不是一个有效的图片文件”);
}
}

⑦ 图片文件 用正则表达式过滤（过滤：过滤文件类型）
（用正则表达式来限制它读取文件的格式）
image/jpeg,image/png,image/jpg,image/gif,image/bmp
regexImageFilter = /^(?:image/bmp|image/gif|image/jpg|image/jpeg|image/png)$/i;

注意：文件上传时，只能使用post提交不能使用get提交
必要的：
processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置Content-Type请求头
不然会导致后台接收不到数据

⑧保存用户头像
检查存放用户头像的目录是否存在
if (!System.IO.Directory.Exists(Server.MapPath("~/Document/userPicture/")))
没有存放用户头像的目录存在，就给它创建一个
System.IO.Directory.CreateDirectory(Server.MapPath("~/Document/userPicture/"));
判断是否上传了图片
图24

if(userPicture!=null && userPicture.ContentLength > 0)
获取文件的扩展名称
string imgExtension = System.IO.Path.GetExtension(userPicture.FileName);
拼接要保存的文件名称
图25

string fileName = DateTime.Now.ToString(“yyyyMMddHHmmssffff”) + “_” + Guid.NewGuid() + imgExtension;
拼接文件保存的路径
string filePath = Server.MapPath("~/Document/userPicture/") + fileName;
保存上传的文件到硬盘
userPicture.SaveAs(filePath);
文件名称保存到user对象
user.picture = fileName;
清空图片的预览
$("#userPicture").attr(“src”, “”)
文件的位置是绝对路径