.NET MVC图片的预览,保存与查看

可通过浏览器页面预览电脑图片,再将图片进行转换保存进入数据库,需要时可在数据库中查找,进行转换之后可在页面进行预览,以下是HTML代码以及插件

1.图片预览
声明一个FileReader()接口用于读取文件,然后调用’选择文件’按钮的改变事件,通过prop()方法获取所选图片的属性,之后调用接口的readAsDataURL()方法将数据另存为URL,再调用接口的onload方法将得到的URL绑定到img标签的src属性上实现图片预览,jQuery代码如下图

2.图片保存
首先调用’保存’按钮的点击事件,通过form表单提交方法将文件发送给控制器，再通过返回值判断成功与否,jQuery代码如下图

在控制器的方法中声明一个二进制类型的参数，判断传入的图片是否为空，初始化数组的长度，然后将文件流读取为二进制数组，接着再赋值给实例化的表格列，就可以将图片转换的二进制数组保存进数据库中，代码如下

3.图片查看
调用’查看’按钮的点击事件,获取文本框的值，发送请求到控制器,然后将获取到的返回值绑定到img标签的src属性，jQuery代码如下图

在控制器中通过获取的ID值查询筛选出数据库中二进制图片数据，然后通过图片格式返回，代码如下