图片上传
*图片上传—>本质是文件上传
*在数据库里面用户添加项,列名:picture,数据类型:nvarchar(100)。
*为什么不用二进制呢?
因为我们一般不会把图片直接添加到数据库,而是把图片的(路径)名称保存到磁盘里面,然后把文件保存的(路径)名称保存到数据库里面。
*直接把图片放进数据库会有什么后果?
图片占据的内存大(小),会影响查询的速度,影响程序运行的性能。
①创建一个上传文件(图片)的框架
1·区别
1.1·筛选后结果
1.2·没筛选的结果
②文件容器,用来存放上传的图片
@* 文件选择控件 隐藏 *@
③文件读取器(读取文件)
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/"));
判断是否上传了图片
if(userPicture!=null && userPicture.ContentLength > 0)
获取文件的扩展名称
string imgExtension = System.IO.Path.GetExtension(userPicture.FileName);
拼接要保存的文件名称
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”, “”)
文件的位置是绝对路径