在带有弹出窗口的网格中显示二进制图像

本文关键字：网格 显示 二进制 图像 窗口 | 更新日期: 2023-09-27 17:56:24

我的页面上有一个 asp.net 数据网格。此网格将有三列。身份证、日期和照片。

照片列是表 VARBINARY（MAX） 上的实际列。

当用户单击照片（可以是文本或图标）时，我想打开一个包含完整大小照片的 jquery 模式。用户可以根据需要右键单击并保存。

我以前从未这样做过。尝试在网上搜索，但我只找到将图像显示在列中的示例，这不是我想要的。

在带有弹出窗口的网格中显示二进制图像

请参阅下面的代码示例，以在网格中显示小图像，并通过单击它来显示大图像。 

<asp:GridView runat="server" ID="gvData" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img src='<%# "data:image/gif;base64," + Eval("Data")  %>' onclick="DisplayImage(this)" height="10" width="10" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<%--Popup dialog to display large image--%>
<div id="dialog" style="display: none">
    <img height="100" width="100" id="imgLargeImage" />
</div>

注意：在这里，我的图像类型是gif因此请根据您的图像类型进行更新。

JavaScript 在弹出窗口中显示图像：

<script type="text/javascript">
    function DisplayImage(ctrl) {
        document.getElementById('imgLargeImage').src = ctrl.src;
        $("#dialog").dialog({
            title: "View Details",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
    }
</script>
相关文章：