首先，要确保自己引进的数据库中有picture这一列名。你也可以自己命名这一列名，不过picture英译就是图片的意思，这样命名比较容易理解。数据类型最好不要用二进制类型，因为一般不会把图片直接插入到数据库中，而是把这个图片保存到磁盘里面，然后把这个图片的名称或者路径放到数据库中。图片、视频占的体积比较大，如果直接放图片或者视频进数据库的话，数据库体积就会变得庞大导致索引速度下降。这样会严重影响到程序的运行性能。所以不建议直接放图片进数据库，而是把文件先保存到磁盘中，然后把文件名称（路径）保存到数据库
接下来进入正题，先在vs中把这个图片的容器写好，如下图所示这样子，我给这个最外面的标签命名了一个标签。在这里面，有角色以及头像。有了“头像”肯定得需要图片来显示头像。所以在这下面写了img标签 src为空就行了id命名为一个userPicture，οndblclick=”showImageSelectDialog()”为双击事件。样式这里，max-width、height为最大宽度、高度。min-width、height为最小宽度、最小高度。border一个像素直径的灰色实线框。
accept在这里的意思是指文件筛选，筛选的内容取决于你要上传的东西，这个东西它支持什么文件格式。onchange事件，默认没有选择文件时值为空，当选择了文件之后值发生了改变。
上传文件需要写一个input标签，如上图所示。type类型为file（文件类型）在这里我并不想让它直接显示出来，所以使用hidden隐藏掉。（双击图片显示出来效果更好，且不影响美观）id我命名为userPictureFile。双击图片触发文件输入框的点击事件下图
选择了图片，就得需要写一个读取这个图片的东西。FileReader文件读取器的意思。
当选择图片之后，值发生了改变，调用loadImgToImg。调用的时候去读取它里面的文件，.get(0)就代表拿到gom对象.files(0)拿到它的第一个文件。然后使用文件读取器读取文件，并把文件转为URL（Base64编码）。
最后在这个文件读取器onload事件里面获取出result(结果)把result设置给image标签的src。这样image就把选择的图片读取出来了。
前面忘记加选择文件类型限制条件了，不要慌，我们给它加上一个限制条件。If语句判断读取的文件是否是需要的文件类型如果不是就提示一下。
