文件(图片)的上传和显示操作步骤
文件(图片)的上传和显示操作步骤
-
去数据库中的用户表里通过设计来给表添加picture图片字段，并设置字段的数据类型为nvarchar(500)（在用户表里的图片是用户的头像）。
-
回到当前项目的Models存放实体模型的文件夹里，去当前项目的实体数据模型里更新已经添加了picture图片字段的表。
更新当前项目数据表的步骤：
（1） 先删除原来还没添加新字段的数据表。
（2） 在实体数据模型的空白处点击鼠标的右键，再点击“从数据库更新模型”，再选择新弹出的窗口里的添加的滑动门下的‘表’，在里面选择刚删除的数据表，在勾选下面“在模型中包括外键列 (k)”的复选框。最后，点击‘完成(f)’按钮，实体数据模型就会生成一个和数据库保持一致的数据表，在新生成的数据表中就有了在数据库中新添加的字段。 -
来到视图上，在页面加载事件中，表格初始化或表格渲染里的cols数据添加上一列代码数据，在数据中的templet 属性代表自定义列，代码如下所示：
-
来到控制器方法里原来的表格数据查询赋值字段的代码里，添加上数据表新添加的字段，并给字段进行赋值操作，代码如下所示：
-
在视图的页面加载事件下面，给自定义列定义一个方法，在方法里设置该列的查看按钮样式，并给该查看按钮绑定一个点击事件，代码如下所示：
-
在当前项目里添加一个文件夹，用于存放上传到视图的图片。
7.给查看按钮定义一个方法，用于显示图片，代码如下所示： -
在视图的 form标签的父元素的div标签里添加上一个子元素的div标签，在新添加的div标签里面添加img标签来显示图片，给img标签添加上一个ID值和一个双击事件，代码如下所示：
-
在视图的 form标签里添加一个input标签，input标签里的代码是用于打开文件的选择框，给input标签添加上一个ID值，再添加accept属性来和type属性值来限定文件的上传，再添加οnchange=”loadImgToImg()”选中图片的改变事件(就是在文件的选择框里选择了图片，再点击打开按钮的事件)，代码如下所示：
注意：accept属性只能够在type=file的时候才可以有这个属性。 accept：在文件上传是使用的属性
10. 在视图的页面加载事件下面的空白处，先给显示图片的双击事件定义一个方法，在方法里调用 input标签里的打开文件选择框的单击事件，起到打开文件对话框的作用，代码如下所示：
- 在视图的页面加载事件下面的空白处，先实例化一个文件的读取方法，再定义一个图片文件的正则表达式，最后，给选中图片的改变事件定义一个方法，在方法里通过正则表达式的测试后，使用 FileReader 读取图片并转为 URL，最后，通过文件读取 onload事件将选择的图片显示到 img标签里，代码如下所示：