Question

我正在使用uplodify上传来上传图片并将其绑定在数据列表中，我可以上传和修改图片，但现在我想在大预览中显示图片。

情景是

默认情况下，第一张图片应以大尺寸显示，之后当用户点击下一行时，下一行图片应以大尺寸显示，直到用户不点击其他一行为止。

如何在javascript或jquery的帮助下完成。

请尽快帮助我......

我的数据专家

<asp:DataList ID="DataList1" runat="server" RepeatDirection="Vertical" onitemcommand="DataList1_ItemCommand" onitemdatabound="DataList1_ItemDataBound" CaptionAlign="Right" CellSpacing="6">
<ItemTemplate>
<asp:ImageButton ID="Image" runat="server" ImageUrl='<%#"~/Controls/ShowImage.ashx?FileName=" +DataBinder.Eval(Container.DataItem, "FilePath") %>'
 OnCommand="Insert_Command" CommandArgument='<%# Eval("Id").ToString() +";"+Eval("FilePath")%>' />
 <asp:Label ID="lblimagenumber" runat ="server" Text='<%# DataBinder.Eval(Container.DataItem, "FileName") %>' ></asp:Label>
</ItemTemplate>
</asp:DataList>

Answer 1

您可以在包含所有上传图片的数据列表下方或顶部放置一个contianer。使用像这样的js

<强>标记

<div id="imagePreview"></div>

JS

$("dataListSelector").find("img").click(function(){

   $("#imagePeview").html("<img src='"this.src"' />");
});

Css - 以大尺寸显示图片预览

#imagePeview img
{
  height:400px;//You can either set height or width to an image, it will scale accordingly
}

Answer 2

我已经拿了一个div

    <div id="loadarea" class="imageViewArea">
        <asp:Image ID="imgthumb" runat="server" />
    </div>

并在插入命令

上

        Image imgThumb = (Image)this.FindControl("imgthumb");
        imgThumb.ImageUrl = "~/Controls/ShowImage.ashx?FileName=" + ImgName;

我能够显示图像

使用来自datalist的javascript或jquery显示完整图像

2 个答案: