如何使用预览图像上传图像Gridview？ [英] How upload image Gridview with preview image?
本文介绍了如何使用预览图像上传图像Gridview？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码：
my code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function ShowpImagePreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#ImgPrv').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table><tr><td>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /></td></tr></table>
<asp:MultiView ID="MainView" runat="server">
<asp:View ID="View1" runat="server">
<div>
<asp:GridView ID="grvspical" runat="server" ShowFooter="True"
AutoGenerateColumns="False" OnRowDeleting="grvspical_RowDeleting"
Width="97%" Style="text-align: left" CellPadding="4" ForeColor="Black"
GridLines="Vertical" BackColor="White" BorderColor="#DEDFDE"
BorderStyle="None" BorderWidth="1px">
<alternatingrowstyle backcolor="White" />
<columns>
<asp:BoundField DataField="RowNumber" HeaderText="SNo" />
<asp:TemplateField HeaderText="Store:">
<itemtemplate>
<asp:DropDownList ID="drpCustomer1" runat="server">
<asp:ListItem>Default
</itemtemplate>
<asp:TemplateField HeaderText="Route:">
<itemtemplate>
<asp:TextBox ID="txtPriority1" runat="server" MaxLength="3" Width="66px">
</itemtemplate>
<asp:TemplateField >
<itemtemplate>
<div> <asp:Image ID="ImgPrv" runat="server" ImageUrl="~/image/imagenotavail.jpg" Height="100px" Width="100px" /><br />
<asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowpImagePreview(this);" /></div>
</itemtemplate>
<asp:TemplateField>
<footerstyle horizontalalign="Right" />
<footertemplate>
<asp:Button ID="ButtonAdd" runat="server" OnClick="ButtonAdd1_Click"
Text="Add Discount" />
</footertemplate>
<asp:CommandField DeleteText="Remove" ShowDeleteButton="True" />
</columns>
<footerstyle backcolor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White"
BorderColor="#999999" />
<pagerstyle backcolor="#F7F7DE" forecolor="Black" horizontalalign="Right" />
<rowstyle backcolor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<sortedascendingcellstyle backcolor="#FBFBF2" />
<sortedascendingheaderstyle backcolor="#848384" />
<sorteddescendingcellstyle backcolor="#EAEAD3" />
<sorteddescendingheaderstyle backcolor="#575357" />
<br />
</div>
</form>
</body>
</html>
fileupload和预览在gridview的外面工作正常。
但是我想在gridview中上传图片并在gridview中显示priview。
但这段代码在gridview中不起作用。
请帮帮我。
谢谢
fileupload and Preview is working fine in out side of gridview.
but i want to upload image in gridview and also show priview in gridview.
but this code is not working in gridview.
so help me please.
thanks
推荐答案
（< span class =code-string>' ＃ImgPrv'）。at tr（' src'，e.target.result）;
}
reader.readAsDataURL（input.files [ 0 ]）;
}
}
< / script >
< / head >
< 正文 >
< < span class =code-leadattribute> form id = form1 runat = server >
< table><tr><td>
<asp:Button ID=\"Button1\" runat=\"server\" Text=\"Button\" onclick=\"Button1_Click\" /></td></tr></table>
<asp:MultiView ID=\"MainView\" runat=\"server\">
<asp:View ID=\"View1\" runat=\"server\">
<div>
<asp:GridView ID=\"grvspical\" runat=\"server\" ShowFooter=\"True\"
AutoGenerateColumns=\"False\"OnRowDeleting =\"grvspical_RowDeleting\"
Width=\"97%\" Style=\"text-align: left\" CellPadding=\"4\" ForeColor=\"Black\"
GridLines=\"Vertical\" BackColor=\"White\" BorderColor=\"#DEDFDE\"
BorderStyle=\"None\" BorderWidth=\"1px\">
<alternatingrowstyle backcolor=\"White\" />
<columns>
<asp:BoundField DataField=\"RowNumber\" HeaderText=\"SNo\" />
<asp:TemplateField HeaderText=\"Store:\">
<itemtemplate>
<asp:DropDownList ID=\"drpCustomer1\" runat=\"server\">
<asp:ListItem>Default
</itemtemplate>
<asp:TemplateField HeaderText=\"Route:\">
<itemtemplate>
<asp:TextBox ID=\"txtPriority1\" runat=\"server\" MaxLength=\"3\" Width=\"66px\">
</itemtemplate>
<asp:TemplateField >
<itemtemplate>
<div> <asp:Image ID=\"ImgPrv\" runat=\"server\" ImageUrl=\"~/image/imagenotavail.jpg\" Height=\"100px\" Width=\"100px\" /> <br />
<asp:FileUpload ID=\"FileUpload1\" runat=\"server\" onchange=\"ShowpImagePreview(this);\" /></div>
</itemtemplate>
<asp:TemplateField>
<footerstyle horizontalalign=\"Right\" />
<footertemplate>
<asp:Button ID=\"ButtonAdd\" runat=\"server\" OnClick=\"ButtonAdd1_Click\"
Text=\"Add Discount\" />
</footertemplate>
<asp:CommandField DeleteText=\"Remove\" ShowDeleteButton=\"True\" />
</columns>
<footerstyle backcolor=\"#CCCC99\" />
<HeaderStyle BackColor=\"#6B696B\" Font-Bold=\"True\" ForeColor=\"White\"
BorderColor=\"#999999\" />
<pagerstyle backcolor=\"#F7F7DE\" forecolor=\"Black\" horizontalalign=\"Right\" />
<rowstyle backcolor=\"#F7F7DE\" />
<SelectedRowStyle BackColor=\"#CE5D5A\" Font-Bold=\"True\" ForeColor=\"White\" />
<sortedascendingcellstyle backcolor=\"#FBFBF2\" />
<sortedascendingheaderstyle backcolor=\"#848384\" />
<sorteddescendingcellstyle backcolor=\"#EAEAD3\" />
<sorteddescendingheaderstyle backcolor=\"#575357\" />
<br />
</div>
</form>
</body>
</html>
('#ImgPrv').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } </script> </head> <body> <form id="form1" runat="server"> <table><tr><td> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /></td></tr></table> <asp:MultiView ID="MainView" runat="server"> <asp:View ID="View1" runat="server"> <div> <asp:GridView ID="grvspical" runat="server" ShowFooter="True" AutoGenerateColumns="False" OnRowDeleting="grvspical_RowDeleting" Width="97%" Style="text-align: left" CellPadding="4" ForeColor="Black" GridLines="Vertical" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"> <alternatingrowstyle backcolor="White" /> <columns> <asp:BoundField DataField="RowNumber" HeaderText="SNo" /> <asp:TemplateField HeaderText="Store:"> <itemtemplate> <asp:DropDownList ID="drpCustomer1" runat="server"> <asp:ListItem>Default </itemtemplate> <asp:TemplateField HeaderText="Route:"> <itemtemplate> <asp:TextBox ID="txtPriority1" runat="server" MaxLength="3" Width="66px"> </itemtemplate> <asp:TemplateField > <itemtemplate> <div> <asp:Image ID="ImgPrv" runat="server" ImageUrl="~/image/imagenotavail.jpg" Height="100px" Width="100px" /><br /> <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowpImagePreview(this);" /></div> </itemtemplate> <asp:TemplateField> <footerstyle horizontalalign="Right" /> <footertemplate> <asp:Button ID="ButtonAdd" runat="server" OnClick="ButtonAdd1_Click" Text="Add Discount" /> </footertemplate> <asp:CommandField DeleteText="Remove" ShowDeleteButton="True" /> </columns> <footerstyle backcolor="#CCCC99" /> <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" BorderColor="#999999" /> <pagerstyle backcolor="#F7F7DE" forecolor="Black" horizontalalign="Right" /> <rowstyle backcolor="#F7F7DE" /> <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" /> <sortedascendingcellstyle backcolor="#FBFBF2" /> <sortedascendingheaderstyle backcolor="#848384" /> <sorteddescendingcellstyle backcolor="#EAEAD3" /> <sorteddescendingheaderstyle backcolor="#575357" /> <br /> </div> </form> </body> </html>
fileupload and Preview is working fine in out side of gridview.
but i want to upload image in gridview and also show priview in gridview.
but this code is not working in gridview.
so help me please.
thanks
fileupload and Preview is working fine in out side of gridview.
but i want to upload image in gridview and also show priview in gridview.
but this code is not working in gridview.
so help me please.
thanks
That is because inside the functionShowpImagePreview, you are directly assigning image t o the Image Control having ID ’ImgPrv’. Unfortunately, when you place aImageinsideGridView, the ID does not remain static, rather it is changed, because there won’t be oneImagecontrol inside theGridView. There will be oneImagecontrol per Row.
So, what you can do is, pass theRow Indexto that function as well. Then from theRow Indexwith somejQuerymanipulations, try to get the image control of that particular Row, from where File Upload control is clicked.
That is because inside the functionShowpImagePreview, you are directly assigning image to the Image Control having ID 'ImgPrv'. Unfortunately, when you place aImageinsideGridView, the ID does not remain static, rather it is changed, because there won't be oneImagecontrol inside theGridView. There will be oneImagecontrol per Row.
So, what you can do is, pass theRow Indexto that function as well. Then from theRow Indexwith somejQuerymanipulations, try to get the image control of that particular Row, from where File Upload control is clicked.
这篇关于如何使用预览图像上传图像Gridview？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
