新增或修改数据时,新增或修改图片与其他的数据有些不一样,下面我们以前来看一下不同在哪里把。
1、 首先在HTml页面搭建放置图片的框架。这里使用了一个input标签与一个img标签,input标签的类型type为file,可以选择文件,input标签的name值要与数据库字段对应,img标签用于存放上传的图片。
2、 选择图片的过程。
(1) 第一步,读取文件:FileReader为文件读取的接口,因为img标签放置图片所以文件的接口设置在img标签上,src路径。
(2) 第二步,打开文件:点击img标签或者input标签,打开文件选择器,因为这里获取的是input标签的id,所以最终的结果都是打开input标签。
(3) 第三步,显示图片文件:运用正则表达式用if判断语句筛选选择的文件是否是合适的图片,是就通过文件读取的接口显示在img标签上,不是就alert弹出提示。
3、 保存。
保存图片之前,需要再一次查询数据库表,然后if判断语句判断图片是否为空,byte数组接收页面传输的图片,将图片转化为二进制数组,再次查询接收图片以及其他数据,这样新增的数据就全部传输完毕,最后add新增数据。
4、 修改时图片回填。
图片回填如同下拉框回填一样需要另外单独回填。控制器方法用Linq语句查询出图片,因为保存图片时是将图片转化为二进制保存,这里同样需要用byte数组接收图片,再return返回图片到页面;Js代码通过获取到放置图片的img标签的id,将图片通过src路径回填到img标签。
Js:
控制器: