上传图片

[weixin_44886816]

图片上传，图片一般都是通过保存到磁盘上，然后把文件名称（路径）保存到数据库，直接保存会导致数据库内存庞大，造成运行缓慢、卡顿
1、添加一个头像ID，设置图片的样式，长宽高，
<img src="" id="userPicture" ondblclick="showImageSelectDialog()" style="max-width: 240px; max-height: 240px;min-width:100px;min-height:100px;border:solid 1px #b7b2b2"/>/
2、隐藏文件选择框，用于弹出用户头像选择，图片一般都是JPEG、JPG等格式，所以用accept进行筛选图片，，定义一个ID和一个改变事件
<input type="file" hidden id="userPictureFile" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" onchange="loadImgToImg()"/>
3、给图片一个点击事件：双击图片，触发文件输入框的点击事件,从而打开文件选择
function showImageSelectDialog() {$("#userPictureFile").click();}
Filereader，文件读取器，这里用来读取图片文件，用正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp文件格式
var imageReader = new FileReader();
regexImageFilter
=/^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
4、给文件读取器添加一个onload事件，在读取文件完成后触发，
imageReader.onload =function(evt){$("#userPicture").attr("src",evt.target.result);}
1、 给文件输入框添加改变事件
function loadImgToImg() {
1）.获取文件输入框里面的文件,一定要转为JavaScript文件,使用.value是拿不到文件的
var file = $("#userPictureFile").get(0).files[0];
2）.判断读取的文件是否是需要的文件类型，如果是，用readAsDataURL来读取文件readAsDataURL是用来读取文件，并把文件转为URL(Base64编码)，方便存储在数据库，不会占用过多的内存，如果不是，弹出提醒框
if (regexImageFilter.test(file.type)){imageReader.readAsDataURL(file);
} else {alert("选择的不是一个有效的图片文件");}
}
2、 发送请求，使用jQuery Ajax发送formData数据，
var form = new FormData();
form.append("userPicture", userPicture);
$.ajax({
method: "post",文件上传时只能使用post提交，不能使用get提交
url:'@Url.Content("~/OthersMaintenance/OpenOffNumber/InsertUser")',
data: form,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (msg) {
if (msg.State) {
//成功
layer.alert(msg.Text, { icon: 1 });
$("#userPicture").attr("src", "");//清空图片的预览
$("#frmUser [type='reset']").click();//清空表单
} else {//失败layer.alert(msg.Text, { icon: 2 }); }
}
});
3、 到控制器用HttpPostedFileBase接收数据
4、 保存用户头像，检查存放用户头像目录是否存在，如果不存在，则创建一个目录
if (!System.IO.Directory.Exists(Server.MapPath("~/Document/userPicture/")))
{System.IO.Directory.CreateDirectory(Server.MapPath
("~/Document/userPicture/"));}
5、 判断是否上传图片，图片不能为空，文件大小要大于0
1）.获取文件的扩展名称
string imgExtension = System.IO.Path.GetExtension(userPicture.FileName);
2）.拼接要保存的文件名称
string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + "_" + Guid.NewGuid() + imgExtension;
3）.拼接文件保存的路径
string filePath = Server.MapPath("~/Document/userPicture/") + fileName;
4）.保存上传的文件到硬盘
userPicture.SaveAs(filePath);
5）.文件名称保存到user对象
user.picture = fileName;