MVC 文件（图片）上传

文件（图片）上传：

图片上传的思路：
一、（页面的操作）主要是通过input的[type=“file”]属性触发图片的上传，然后将上传的图片进行筛选，验证，读取。然后放到指定的容器，当读取文件后并将文件转为Base64编码，再将img标签的src值设置为读取到的Base64编码
注意：文件的上传只能使用post提交，不能使用get，因为文件比get的容量要大。
二、（后台的操作）判断是否有存放图片的目录（如果没有，创建一个目录） -> 验证图片是否有上传以及图片的大小是否有一字节以上 -> 获取图片的扩展名称和拼接图片名称 ->
拼接图片保存的路径和上传到指定的硬盘 -> 最后将文件的名称保存到数据库
注意：图片上传不会把图片保存到数据库，而是把图片的名称或路径保存到数据库。因为文件太大，全放到数据库会造成数据库的运行缓慢

1.图片的选择控件弹出和读取选择到的文件、文件读取后的事件
（1）创建一个文件选择控件，在触发它时弹出文件选择。accept 属性：作用于筛选文件的格式。file对象 用于返回关于指定文件的信息。
Onchange() 值改变时触发的事件
图示1.1：

（2）new一个文件读取器（FileReader） 。然后在input标签的值发生改变时触发该方法。
读取发生改变的值，然后用指定的正则表达式判断该值是否是图片类型。再将读取到 的文件转为URL（Base64）编码

正则表达式：用于图片类型的过滤
图示1.2：

图示1.3：

（3）将显示图片的img标签的src属性的值设置为读取到的Base64编码。从而实现图片在页面上的显示
图示1.4：

2、图片页面的提交
页面提交数据时，先获取到文件
var userPicture = $("#userPictureFile").get(0).files[0]; 获取文件
然后使用FormData()方式进行提交
var form = new FormData()
form.append(“userPicture”, userPicture)
在使用AJAX异步请求时，设置不要去处理发送的数据
注意：文件的上传只能使用post提交，不能使用get
图示1.5：

3、后台的接收和保存
（1）HttpPostedFileBase： 这是控制器用来接收和访问数据的基类，文件的接收用它作为类型
（2）判断和验证
①保存图片之前先判断是否有存在存放图片的目录，如果没有，就用代码创建一 个目录
图示1.6：

②判断是否上传了图片和图片的大小是否有大于一字节
图示1.7：

（3）保存图片
①验证通过后先获取文件的扩展名称，然后再拼接文件名称
文件名称：当前的时刻+Guid 创建的字符串+文件的扩展名
②创建名称后，再拼接文件保存的路径（目录的路径+文件名称）
③保存上传的文件到硬盘（将页面要上传的图片保存到拼接好的路径里）。
再把文件的名称保存到数据库指定的对象里面
图示1.8：

注意：一般不要把文件的路径保存到数据库的对象里，因为保存的是绝对路径，有 一定的局限性。