如何在新增修改模态框里面实现双击选择图片

开发工具与关键技术：VS    如何在新增修改模态框里面实现双击选择图片
作者：赖文扬
撰写时间：2019年6月15日

其实在新增修改的模态框里面可以实现双击选择到图片的功能，那要怎样实现呢？
首先是要在新增模态框的内容里面最上面用一个from表单来写，然后用一个div
来封装里面的代码，div里面第一个用img来获取那个生成图片的宽度和高度，
再给它一个id和一个点击事件。再到div里面用input来放name和id，还有一个
点击事件。最后再div里面用p标签封装“双击点击图片”这几个字。然后下面就继续
完成模态框的内容就可以了，模态框弹出来了之后就根据需要的大小和位置来调就
可以了。下面修改的模态框也是一样的，也是在修改模态框内容里面写的，但是要
改img和input里面的id，id不能重复的。
（下面截图）

上面的内容写完了之后呢还要注意一下的是在下面弹出新增模态框的时候要清空
一下图片，清空图片要选择到上面的img里面的id，然后再写清空的代码，再完成
下面的保存新增和获取页面的数据就可以了。弹出新增模态框和保存新增和和平时
那些是一样的，不同的是写一句清空的代码就可以了。然后再来到控制器这边写新增
的代码，控制器这边的代码也是一样的，但是要在新增里面写一点保存新增图片的代码
。首先是声明一个byte 来保存新增图片，然后再判断图片的文件是否为空
然后在初始化数组的长度，为节省空间，长度由实际上传的图片的长度决定，最后读取
该图片文件，将图片转为流结束位置就可以了。
（下面截图）

新增写完了就回到视图代码这边写打开file表单的代码，首先是用function 来获取到
上面img的id，然后在创建FileReader的对象、正则表达式过滤图片的文件。
（下面截图）

然后再用file表单改变事件，将选择的图片显示到ing元素，首先用function来获取上面
input的id，然后选择到图片文件，再判断上传文件是否为图片格式，最后读取文件onload
的事件，将改URL绑定到img的标签的src属性上，就可以实现图片的上传预览效果了。
（下面截图）

视图代码写完了，就来到上面修改这里来写一下清空图片代码，首先选择到上面修改
img的id，然后再到下面写一下回填图片的信息，也是选择到上面修改img的id，写完
了就来到控制器这边写一下根据ID查询图片的代码，然后再到保存修改里面写一下判断
图片文件是否为空、存放图片的变量、变量长度、读取图片存入变量这些代码，最后保存
修改就可以了。
（下面截图）