MVC.NET图片上传

一、
在图片上传时我们要在数据库中为他添加一个字段名为（picture）类型为nvarchar(100),数据的

类型不为二进制类型，我们一般不会把图片插到数据库，而是保存文件的一个路径，或者一个名称

二、
在你需要上传图片的页面上把它的样式布局好

头 像

<img src="" id=“userPicture” οndblclick=“showImageSelectDialog()”

style=“max-width: 240px; max-height: 240px;min-width:100px;min- height:100px;border:solid 1px #b7b2b2”/>

还有他的文件选择控件 要隐藏起来（hidden）

三、
图片上传

1. 
文件读取器

var imageReader = new FileReader();

2. 
图片文件 正则表达式过滤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) {

$("#userPicture").attr(“src”,
evt.target.result);}

双击图片框 触发 文件输入框的点击事件

function
showImageSelectDialog() {

$("#userPictureFile").click();}

文件输入框改变事件，改变时读取图片

function loadImgToImg() {

获取文件输入框里面的文件

var file = $("#userPictureFile").get(0).files[0];

判断读取的文件是否是需要的文件类型

if (regexImageFilter.test(file.type)) {

使用文件读取器读取文件。并把文件转为URL(Base64编码)

imageReader.readAsDataURL(file);

} else {

layer.alert(“选择的不是一个有效的图片文件”);

}

}

1. 
使用JQuer发送FormData数据

form.append(“userPicture”, userPicture);

2. 
文件上传时只能使用post提交
，不能使用get提交

method:
“post”,

还要加上这两个，不然文件上传不了

processData:
false, 告诉jQuery不要去处理发送的数据

contentType: false,  告诉jQuery不要去设置Content-Type请求头

四、
保存上传的图片

1. 
检查存放图片的目录是否存在

if (!System.IO.Directory.Exists(Server.MapPath("~/Document/userPicture/")))

{System.IO.Directory.CreateDirectory(Server.MapPath("~/Document/userPicture/"));}

2. 
判断是否上传图片

判断文件大小如果为0就没有意义了

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;

}

3. 
还要声明他的变量，读取数据

HttpPostedFileBase
userPicture