图片上传

在做MVC的项目中，经常需要上传文件来完善项目，而经常做的有图片上传了。

图片上传

1、一般不会把图片直接保存在数据库里面而是保存在磁盘上面再把路径保存在数据库中，所以要先在数据库的表中加列名picture而数据类型用nvarchar(100)。

2、然后开始准备容器，我们是先双击图片触发文件输入框，文件输入框改变了读取的图片然后我们需要使用文件读取器读取文件，并把文件转为URL(Base64编码)，显示在浏览器上面。如下所示：
//图片上传=====
//文件读取器
var imageReader = new FileReader();
//图片文件 正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp
regexImageFilter = /^(?:image/bmp|image/gif|image/jpg|image/jpeg|image/png)$/i;
//文件读取器onload事件 在读取文件完成后触发
imageReader.onload = function (evt) {
console.log(evt);
$("#userPicture").attr(“src”, evt.target.result);
}
//双击图片 触发 文件输入框的点击事件
function showImageSelectDialog() {
$("#userPictureFile").click();
}
//文件输入框改变事件，改变时读取图片
function loadImgToImg() {
//获取文件输入框里面的文件
var file = $("#userPictureFile").get(0).files[0];
//判断读取的文件是否是需要的文件类型
console.log(file.type);
if (regexImageFilter.test(file.type)) {
//使用文件读取器读取文件。并把文件转为URL(Base64编码)
imageReader.readAsDataURL(file);
} else {
alert(“选择的不是一个有效的图片文件”);
}
}
3、然后设置数据提交，再使用HttpPostedFileBase去接受。如下：
//===发送请求
//=使用JQuery Ajax发送FormData数据
//构建FormData数据
var form = new FormData();
form.append(“userPicture”, userPicture);
//=使用JQuery发送FormData数据
var layerIndex = layer.load();//打开加载层
//请求
$.ajax({
method: “post”,//文件上传时只能使用post提交，不能使用get提交
url:’@Url.Content("~/OthersMaintenance/OpenOffNumber/InsertUser")’,
ata: form,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (msg) {
//关闭加载层
layer.close(layerIndex);
if (msg.State) {
//成功
layer.alert(msg.Text, { icon: 1 });
$("#userPicture").attr(“src”, “”);//清空图片的预览
$("#frmUser [type=‘reset’]").click();//清空表单
} else {
//失败
layer.alert(msg.Text, { icon: 2 });
}
}
});
4、之后进行数据验证进行保存进数据库
//检查存放用户头像的目录是否存在
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;
}