开发工具与关键技术:Visual Studio 2015,MVC
头像上传
在我们的生活中,使用QQ或微信的时都有自己的头像,这头像是怎样上传到QQ或微信上的呢?下面我来给大家分享MVC中头像上传的知识点。
首先创建一个控制器和一个视图,在视图的HTML中写一下布局给它来一个美美的图片框
然后呢分一下几步
(1)绑定 头像框 触发 文件输入框的点击事件;
(2)用正则表达式过滤图片文件(image/jpeg,image/png,image/jpg,image/gif,image/bmp)
(3)使用文件读取器在文件输入框改变时读取图片,首先要获取到文件输入框里的文件;然后要判断读取的文件是不是需要的文件类型;接下来要使用文件读取器读取文件,并且把文件转换为URL(Base64编码)。
以上四个步骤的代码,效果图为上一个文本框
(4)使用文件读取器onload事件,将读取到的图片显示到图片(img)元素中
我们上传图片时要保存在数据库中才行,不然头像无法保存只能在上传页面上显示只要退出上传页面我们就看不到我们上传的图片了,那接下来就要用到控制器来接收和判断数据了。
在控制器中接收保存数据要用try{ } catch (Exception){} 用来捕捉异常,还要开启事务,提交事务才能把我们想要保存的数据保存到数据库,接下来就看代码吧