二进制图片信息存入数据库并用gridview显示图片（添加鼠标移到图片上显示大图效果）后台语言vb.net

本文链接：https://blog.youkuaiyun.com/magic1dolphin/article/details/6822798

这几天一直纠结这个问题关于gridview直接从数据库读取二进制图片并显示的问题（存好存呵呵

）

---------------------------------------还是先说下二进制图片信息存入数据库的问题 ----------------------------------------

后台vb代码可以放在按钮什么的响应代码里

          '保存图片到数据库
            Dim strPath As String = 你的图片地址例如 "~/image/1.jpg" （动态变量也可）
           '读取图片
            Dim fs As FileStream = New System.IO.FileStream(strPath, FileMode.Open, FileAccess.Read)
            Dim br As BinaryReader = New BinaryReader(fs)
            Dim image() As Byte = br.ReadBytes(CType(fs.Length, Integer))
            br.Close()
            fs.Close()
            '存入
            myConnection = New SqlConnection(conStr) 'conStr是数据库连接字符串
            mySQL = " update CollegeInfo set image"  '这里用的update语句 视情况修改吧
            mySQL = (mySQL & "= (@imageBinary) where id =" & rowIndex)  'rowIndex是猫猫动态获取的id号 大家随意
            myCommand = New SqlCommand(mySQL, myConnection)
            myCommand.Parameters.Add("@imageBinary", SqlDbType.Binary, image.Length)
            myCommand.Parameters("@imageBinary").Value = image
            myConnection.Open()
            myCommand.ExecuteNonQuery()
            myConnection.Close()

这样就存进去了最好加上try catch块哈猫猫这段就是在那里面的

注：conStr例子 Dim conStr As String = "Data Source=127.0.0.1;Initial Catalog=数据库名;User ID=sa;Password=sa" 之类的

---------------------------------------图片在gridview中显示问题 ----------------------------------------

法一：从数据库读取出来先存到本地然后把url赋给图片控件简单而且速度快

前台在gridview里添加模板列下面的代码定义了两个image控件 image1以图标显示 image2是用来显示大图效果的这个class的css样式放在本篇的最后嘿嘿

 <asp:TemplateField><ItemTemplate>
                     <div class="thumbnail">
                     <asp:Image ID="Image1" runat="server" Height="50" Width="50" />
                     <span><asp:Image ID="Image2"  runat="server" /></span>
                    </div>
    </ItemTemplate></asp:TemplateField>

记得在asp这边为gridview添加 rowdatabound 事件不然在双击rowdatabound时会弹出警告不让无法写响应方法哦

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="id" DataSourceID="SqlDataSource1" 
            OnRowDataBound="GridView1_RowDataBound">

后台在rowdatabound里写

  If (e.Row.RowIndex < 0) Then
            Return
        End If
        Dim strImagename As String = CType(DataBinder.Eval(e.Row.DataItem, "id"), String)   '用id做图片名字（不重复）
        Dim tmp_Image As Image = CType(e.Row.Cells(3).FindControl("Image1"), Image)
        Dim tmp_Image2 As Image = CType(e.Row.Cells(3).FindControl("Image2"), Image)
        If Not System.Convert.IsDBNull(DataBinder.Eval(e.Row.DataItem, "image")) Then   '如果数据库存放图片的二进制字段不为空
            Dim image() As Byte = CType(DataBinder.Eval(e.Row.DataItem, "image"), Byte()) 'image是我数据库里存放图片的二进制字段
            Dim strPath As String = ("~/image/" + (strImagename.Trim + ".JPG"))
            Dim strimagePath As String = Server.MapPath(strPath)
            Dim bw As BinaryWriter
            bw = New BinaryWriter(File.Open(strimagePath, FileMode.OpenOrCreate))
            bw.Write(image)
            bw.Flush()
            bw.Close()
            tmp_Image.ImageUrl = strPath     'image1 和image2公用一个path 这也是说速度快的原因 因为写操作只执行了一次
            tmp_Image2.ImageUrl = strPath
        End If

好啦这样只要你存入的信息没有问题就可以完好的显示了

法二：新建页面用response把图片写出到页面然后在image的url中调用这个页面（ps：本来这样就慢我这还
一个放大效果没的url可拿只能再写一次所以说慢嘛）

default.aspx：还是image1 image2这两个图片控件不过加了个ImageUrl = '<%#"showImage.aspx?id="+ CType(DataBinder.Eval(CType(Container,GridViewRow).DataItem, "id"), String) %>' （ps：这url我还试了半天因为后面的id一加就错刚接触asp不久对这些还不太了解 showImage.aspx是那个写出图片的asp页面 id传的是数据表的主键好唯一确定哪个图片 "id"就是gridview绑定数据表的id字段发现猫猫废话真多）

<asp:TemplateField><ItemTemplate>
                     <div class="thumbnail">
                     <asp:Image ID="Image1" runat="server" Height="50" Width="50" ImageUrl = '<%#"showImage.aspx?id="+ CType(DataBinder.Eval(CType(Container,GridViewRow).DataItem, "id"), String) %>' />
                     <span><asp:Image ID="Image2"  runat="server" ImageUrl = '<%#"showImage.aspx?id="+ CType(DataBinder.Eval(CType(Container,GridViewRow).DataItem, "id"), String) %>' /></span>
                    </div>
    </ItemTemplate></asp:TemplateField>

新建asp页面（就是上面url里那个showImage.aspx）

前台不管直接去.vb的pageload里加写出代码下面的供参考（C#的网上搜吧我是觉得vb的好少所以写vb的）

还有这段也放在try catch里吧习惯上涉及数据库操作的要么先判断要么就catch下比较稳妥

       myConnection = New SqlConnection(conStr) 'conStr是数据库连接字符串 根据需要写就好 
        myConnection.Open()
        mySQL = "select * from CollegeInfo where id ='" + Request.QueryString("id") + "'"   '就是上面那个url里传过来的id
        myCommand = New SqlCommand(mySQL, myConnection)
        myReader = myCommand.ExecuteReader()
        Do While myReader.Read()
             If Not System.Convert.IsDBNull(myReader.Item("image")) Then '如果image字段不为空读取
                image = myReader.Item("image") '虽然写的是while 实际就一条 id是主键嘛 懒得改了 哈哈
            End If         
        Loop
        myReader.Close()
        myConnection.Close()
        If image IsNot Nothing Then
            Response.ContentType = "image/jpeg"  '感兴趣的参考下ContentType的其它类型 
            Me.count_len = 0
           While Me.count_len < image.Length  
                Response.OutputStream.Write(image, Me.count_len, 1000)
                Me.count_len += 1000
            End While
        End If

废话一下：关于ContentType的其它类型猫猫有收藏一篇存在窝里： http://blog.youkuaiyun.com/magic1dolphin/article/details/6822825

关于红色的这段代码猫猫存的图片比较大一开始写出的时候就是缓冲区不够的error 郁闷啊所以就随便拆了下可以根据缓冲区大小和自己需要调整如果只是头像那种小图片也可以一句Response.OutputStream.Write(image, 0, image.Length)就搞定

最后贴上class="thumbnail" 这个class的css代码网上搜的还不错原先是用链接形式的可是链接会显示方框诶不喜欢于是猫猫改成div的了只要把image放div里就好显示大图的那个放span里不罗嗦了上代码可以新建个css文件然后 <link href="样式文件名字.css" rel="stylesheet" type="text/css"/>引入这样asp页面还能整洁点视自己需要改改样式边框啊神马的（猫猫又废话了）

body
{
 }
.thumbnail{   
position: relative;   
z-index: 0;   
}   
.thumbnail:hover{   
background-color: transparent;   
z-index: 50;   
}   
.thumbnail span{ /*CSS for enlarged image*/   
position: absolute;     
padding:4px;
background:white;
border: 1px dashed gray;   
visibility: hidden;   
color: black;   
text-decoration: none;   
}   
.thumbnail span img{ /*CSS for enlarged image*/   
border-width: 0;
}   
.thumbnail:hover span{ /*CSS for enlarged image on hover*/   
visibility: visible;   
top: 0px;   
left: 60px; /*position where enlarged image should offset horizontally */   
}

哦了写了一长篇猫猫累了继续修改修改代码去~