在gridview中显示图片(多图)
Display Images in gridview (Multiple Images)
我实现了一个功能,其中图像路径存储在数据库中,图像存储在服务器中。
现在,我想要的是无论何时上传图像,路径都应该保存在 table 中,然后我希望图像显示在 gridview 中。
我制作了一个用于显示图像的 gridview,目前它在我想显示 Images
而不是路径的那个列中使用 Image_path
。
另外,请看Gridview的代码:
<asp:GridView ID="grdGalleryData" runat="server" Width="100%" border="1"
Style="border: 1px solid #E5E5E5;" CellPadding="3" AutoGenerateColumns="False"
AllowPaging="True" PageSize="2" CssClass="hoverTable" DataKeyNames="Id">
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField HeaderText="Select" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" />
</ItemTemplate>
<HeaderStyle CssClass="k-grid td"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:TemplateField>
<asp:BoundField DataField="gallery_id" HeaderText="Id" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="image_title" HeaderText="Gallery title" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="image_description" HeaderText="Gallery Description" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="image_path" HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
</Columns>
</asp:GridView>
用于将图像插入 table 的隐藏代码:-
protected void btnAdd_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile == false)
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "<script>alert('Please select the file.')</script>", false);
}
else
{
foreach (var file in FileUpload1.PostedFiles)
{
string filename = Path.GetFileName(file.FileName);
FileUpload1.SaveAs(Server.MapPath("/GalleryImages/" + filename));
SqlCommand cmd = new SqlCommand("Insert into tbl_gallery_stack(gallery_id, image_title, image_description, image_path) values (@gallery_id,@image_title,@image_description,@image_path)", conn);
cmd.Parameters.AddWithValue("@gallery_id", ddlImagesId.SelectedValue);
cmd.Parameters.AddWithValue("@image_title", txtImageTitle.Text);
cmd.Parameters.AddWithValue("@image_description", txtImageDescription.Text);
cmd.Parameters.AddWithValue("@image_path", filename);
conn.Open();
cmd.ExecuteNonQuery();
BindGrid();
}
}
}
请告诉我如何在此处的 gridview 中显示图像。
改变这个:
<asp:BoundField DataField="image_path" HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
为此:
<asp:TemplateField HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:Image ID="img" runat="server" ImageUrl='<%# Bind("image_path") %>' />
</ItemTemplate>
</asp:TemplateField>
来自 Nadeem 的更新。
在 ASPX 文件中:
<asp:TemplateField HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:Image ID="imgDisplay" runat="server" ImageUrl='<%#Getimage(Eval("image_path").ToString()) %>' Width="100px" Height="100px" />
</ItemTemplate>
</asp:TemplateField>
隐藏代码:
protected string Getimage(string img)
{
if (img != "")
return ("~/GalleryImages/" + img);
else
return ("Images/noimg.gif");
}
我实现了一个功能,其中图像路径存储在数据库中,图像存储在服务器中。
现在,我想要的是无论何时上传图像,路径都应该保存在 table 中,然后我希望图像显示在 gridview 中。
我制作了一个用于显示图像的 gridview,目前它在我想显示 Images
而不是路径的那个列中使用 Image_path
。
另外,请看Gridview的代码:
<asp:GridView ID="grdGalleryData" runat="server" Width="100%" border="1"
Style="border: 1px solid #E5E5E5;" CellPadding="3" AutoGenerateColumns="False"
AllowPaging="True" PageSize="2" CssClass="hoverTable" DataKeyNames="Id">
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:TemplateField HeaderText="Select" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" />
</ItemTemplate>
<HeaderStyle CssClass="k-grid td"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:TemplateField>
<asp:BoundField DataField="gallery_id" HeaderText="Id" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="image_title" HeaderText="Gallery title" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="image_description" HeaderText="Gallery Description" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="image_path" HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
</Columns>
</asp:GridView>
用于将图像插入 table 的隐藏代码:-
protected void btnAdd_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile == false)
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "<script>alert('Please select the file.')</script>", false);
}
else
{
foreach (var file in FileUpload1.PostedFiles)
{
string filename = Path.GetFileName(file.FileName);
FileUpload1.SaveAs(Server.MapPath("/GalleryImages/" + filename));
SqlCommand cmd = new SqlCommand("Insert into tbl_gallery_stack(gallery_id, image_title, image_description, image_path) values (@gallery_id,@image_title,@image_description,@image_path)", conn);
cmd.Parameters.AddWithValue("@gallery_id", ddlImagesId.SelectedValue);
cmd.Parameters.AddWithValue("@image_title", txtImageTitle.Text);
cmd.Parameters.AddWithValue("@image_description", txtImageDescription.Text);
cmd.Parameters.AddWithValue("@image_path", filename);
conn.Open();
cmd.ExecuteNonQuery();
BindGrid();
}
}
}
请告诉我如何在此处的 gridview 中显示图像。
改变这个:
<asp:BoundField DataField="image_path" HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td" />
为此:
<asp:TemplateField HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:Image ID="img" runat="server" ImageUrl='<%# Bind("image_path") %>' />
</ItemTemplate>
</asp:TemplateField>
来自 Nadeem 的更新。
在 ASPX 文件中:
<asp:TemplateField HeaderText="Images" ItemStyle-Width="25" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:Image ID="imgDisplay" runat="server" ImageUrl='<%#Getimage(Eval("image_path").ToString()) %>' Width="100px" Height="100px" />
</ItemTemplate>
</asp:TemplateField>
隐藏代码:
protected string Getimage(string img)
{
if (img != "")
return ("~/GalleryImages/" + img);
else
return ("Images/noimg.gif");
}