图片上传保存

一：图片上传
结果视图：

步骤：
1.先创建一个img标签，给它设置宽高以及边框样式

2.当用户双击img标签时，弹出文件选择框
（1）给img标签设置一个双击事件：

（2）创建一个文件选择控件(input标签)，设置文件输入框改变事件，将它隐藏：

注：accept：规定服务器接收到的文件的类型。（文件是通过文件上传提交的）

(3)当双击img标签时 触发 文件输入框的点击事件：

3.文件输入框改变事件，改变时读取图片
(1)获取文件输入框里面的文件
创建一个file变量通过input标签的ID值获取：var file = $("#userPictureFile").get(0).files[0];

(2)判断读取的文件是否是需要的文件类型
图片文件 正则表达式过滤：
regexImageFilter = /^(?:image/bmp|image/gif|image/jpg|image/jpeg|image/png)$/i;

(3)进行判断file是否是图片文件：

}else{ alert(“选择的不是一个有效的图片文件”); }

(4)使用文件读取器读取文件
文件读取器： var imageReader = new FileReader();

(5)把文件转为URL(Base64编码)
imageReader.readAsDataURL(file);

4.将用户选择的图片文件显示在img标签上
(1)使用文件读取onload事件，在读取文件完成后触发
imageReader.onload = function (evt) {
}

(2)通过img标签设置的ID选择器找到对应的img标签，将图片显示在img标签上
$("#userPicture").attr(“src”, evt.target.result);
结论：这样就可以将图片文件绑定到img标签上，但它只是显示在页面上而已，并没有实质性的保存。

5.发送post请求给控制器
(1)先创建一个变量，获取用户选择的图片文件

(2)构建FormData数据：
var form = new FormData();
form.append(“userPicture”, userPicture);

(3)使用JQuery Ajax发送FormData数据
注：文件上传时只能使用post提交，不能使用get提交
打开加载层：var layerIndex = layer.load();

二：图片保存
结果视图：
数据库： 文件夹：

1.控制器接收参数

注：HttpPostedFileBase： 充当类的基类，这些类提供对客户端已上载的单独文件的访问。

2.保存用户头像
(1)检查存放用户头像的目录是否存在

注：Exists： 确定给定路径是否引用磁盘上的现有目录。引用的参数就是它要测试的路径。如果参数引用现有目录，则为 true；否则为 false。
CreateDirectory：在指定路径创建所有目录和子目录。返回一个对象，它表示指定路径对应的目录。

(2) 判断是否上传了图片

(3)获取文件的扩展名称

注：GetExtension： 返回指定的路径字符串的扩展名。

(4)拼接要保存的文件名称(为了确保图片文件名称的唯一性，方便用户使用)
注： Guid： 表示全局唯一标识符 (GUID)。

(5)拼接文件保存的路径

(6)保存上传的文件到硬盘

注：SaveAs：在派生类中重写时，保存上载文件的内容。

(7)文件名称保存到user对象，通过user对象保存到数据库

结论：将保存图片保存在userPicture文件夹中，图片的名称保存在数据库中，这样就可以通过在数据库里查找到的图片名称，找到对应的图片路径url，通过img标签的src匹配对应的路径，使图片显示在页面上。