MVC图片上传

图片上传

由于一般不会把图片插到数据库中，也不会把图片保存到数据库中，只是把图片的路径保存到数据库，虽然数据库支持图片的二进制保存，但是基本上不会直接存放图片，因为图片所占的内存基本在100k以上，若是需要保存几百张图片进数据库，会导致数据库体积庞大，索引速度下降（查询速度，排序等等的速度下降），严重影响到程序的运行性能。
所以一般是把图片（文件）保存到硬盘上，然后把其名称（或者路径）保存到数据库中。

 

注意：文件上传时只能使用 post提交，不能使用 get提交，因为文件超出get的大小，会把get截断，导致无法提交

 

因图片属于文件类型，所以需要使用文件读取器。

而文件读取器的onload事件在读取文件完成后触发

图片上传时，可以使用正则表达式，限制读取文件的格式

/^(?:image\/bmp|image\/gif|image\/jpg|image\/png|image\/jpeg)$/i

 

图片显示步骤：

双击触发文件输入框点击事件

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

使用文件读取器读取文件，并把文件转为URL（Base64编码）

触发onload事件，获取读取后的编码结果，把结果设置给图片的src后，就可以把图片显示出来，当然显示出来的图片并没有到服务器、数据库中

上传：

检查存放图片的目录是否存在，没有就创建一个存放图片的目录

判断是否上传了图片

获取文件的扩展名称，拼接要保存的文件名称，拼接文件的保存路径（并不会保存完整的路径，只会保存相对路径）

保存上传的文件到硬盘

再保存到数据库中

 

而图片修改，就比图片上传多出一个删除旧图片的操作。

如图：

 

 

 

其它重要知识点：

（1）重定向：

（2）为了避免项目登录主页面后停止调试，再重新启动后刷新出现主页面嵌套主页面的情况，一般会在登录页面加上：

 

（3）

一、连表查询  join tab被连接表 in model.表名 on 连接表.外键/主键/外键 equals tab被连接表.主键/外键/外键

二、linq 单表查询的写法

(from 自定义的表名 in Model对象.查询的表

where 自定义的表名.字段1 关系运算符 值 

自定义的表名.字段2 关系运算符 值

orderby 自定义的表名.字段

select 自定义的表名

select new {[属性名1= ]自定义的表名.字段1,

          [属性名2= ]自定义的表名.字段2,

          [属性名3= ]自定义的表名.字段3,

          ....

}

select 类名{ 类的属性1=自定义的表名.字段1，

             类的属性2=自定义的表名.字段2，

              ....

}).Single();//查询单条数据，当没有数据或者有多条数据时会触发异常

.SingleOrDefault();//查询单条数据，当没有数据返回默认值（对象的默认值为null）；当有多条数据时触发异常

.ToList();//查询多条数据并转为List

.Count();//查询有多少条数据

 

（4）验证码是由代码自动生成，并不是某张静态图片

所以在刷新图片时，为了避免浏览器缓存图片，通常会加上一个参数

如图：