在gridview中预览图片而不使用Handler [英] Preview picture in gridview without using Handler
问题描述
大家好
我的问题与gridview有关
我有这样的网格视图
Hi all
My problem is related to gridview
I have a gridview like this
<asp:GridView ID="gdvstudent" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True"
CellPadding="4" AllowSorting="True" OnSorting="gdvstudent_Sorting" ForeColor="#333333"
ShowFooter="true" SortedAscendingCellStyle-BackColor="Blue" HorizontalAlign="Center"
AllowPaging="True" PageSize="5" Width="754px">
<alternatingrowstyle backcolor="White" />
<columns>
<asp:TemplateField HeaderText="Student Name" SortExpression="txt_student_name">
<itemtemplate>
<%#Eval("txt_student_name")%></itemtemplate>
<edititemtemplate>
<asp:TextBox ID="txtStudentName" runat="server" Text=''<%#Eval("txt_student_name")%>''>
</edititemtemplate>
<asp:TemplateField HeaderText="Student Roll" SortExpression="txt_student_roll">
<itemtemplate>
<%#Eval("txt_student_roll")%></itemtemplate>
<edititemtemplate>
<asp:Label ID="txtstudentroll" runat="server" Text=''<%#Eval("txt_student_roll")%>''>
</edititemtemplate>
<asp:TemplateField HeaderText="Student class" SortExpression="txt_student_class">
<itemtemplate>
<%#Eval("txt_student_class")%></itemtemplate>
<edititemtemplate>
<asp:TextBox ID="txtstudentclass" runat="server" Text=''<%#Eval("txt_student_class")%>''>
</edititemtemplate>
<asp:TemplateField HeaderText="Student Marks" SortExpression="txt_student_marks">
<itemtemplate>
<%#Eval("txt_student_marks")%></itemtemplate>
<edititemtemplate>
<asp:TextBox ID="txtstudentmarks" runat="server" Text=''<%#Eval("txt_student_marks")%>''>
</edititemtemplate>
<asp:TemplateField HeaderText="Student DOB" SortExpression="txt_student_dob">
<itemtemplate>
<%#Eval("txt_student_dob")%></itemtemplate>
<edititemtemplate>
<asp:TextBox ID="txtstudentdob" runat="server" Text=''<%#Eval("txt_student_dob")%>''>
</edititemtemplate>
<asp:TemplateField HeaderText="Student Resume">
<itemtemplate>
<asp:LinkButton runat="server" ID="student_resume" CommandArgument=''<%# Bind("student_resume") %>''
Visible="false" OnClick="DownloadFile" Text="Resume">
</itemtemplate>
<edititemtemplate>
<asp:FileUpload ID="fileupload" FileName=''<%# Bind("student_resume") %>'' runat="server">
</edititemtemplate>
<asp:TemplateField HeaderText="Student Picture">
<itemtemplate>
<asp:Image runat="server" ID="student_Pic" src=''<%# "frmImageHandler.ashx?student_Pic=" + Eval("student_Pic")%>''
ImageAlign="Middle" AlternateText="Insert Picture">
</itemtemplate>
<edititemtemplate>
<asp:FileUpload ID="fileupload1" FileName=''<%# Bind("student_pic") %>'' runat="server">
</edititemtemplate>
<asp:TemplateField HeaderText="Edited" Visible="False">
<itemtemplate>
<asp:CheckBox ID="ChkboxEdit" runat="server" Checked=''<%#Eval("edited")%>'' />
</itemtemplate>
<edititemtemplate>
<asp:CheckBox ID="ChkboxEdit" runat="server" Checked=''<%#Eval("edited")%>'' />
</edititemtemplate>
</columns>
<footerstyle backcolor="#990000" font-bold="True" forecolor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<pagerstyle backcolor="#FFCC66" forecolor="#333333" horizontalalign="Center" />
<rowstyle backcolor="#FFFBD6" forecolor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<sortedascendingcellstyle backcolor="Azure" />
<sortedascendingheaderstyle backcolor="Aqua" />
<sorteddescendingcellstyle backcolor="Blue" />
<sorteddescendingheaderstyle backcolor="BlueViolet" />
现在我想要什么实现是在我点击编辑按钮后通过上传按钮上传一张图片，它将在相应的单元格中显示为预览，图片既不保存在数据库中，也不通过FileUpload.SaveAs（）选项进行物理保存。
要在gdvstudent_RowUpdating（）事件中实现这一点，我将转换为byte []中的图像，然后尝试再次通过context.Response.BinaryWrite（sqlRdr）将其转换为图像（图片））但失败。
可能是我的方法错了，可能有一些简单的方法来做到这一点所以请帮助我。
注意：1。无数据库保存
2.无物理路径保存
3.仅预览图像
用户在编辑gridview后点击保存按钮即可完成。
Now What i want to achieve is after I click in to edit button and through upload button upload a picture it will show in the respective cell as preview, the picture is neither saved in database nor save physically through the FileUpload.SaveAs() option.
To achieve this in gdvstudent_RowUpdating() event i convert the image in byte[] and then try to again convert it in to image by context.Response.BinaryWrite(sqlRdr("Image")) but failed.
May be my method is wrong, there might have some easy way to do this so please help me.
Note: 1. No database save
2. No physical path save
3. only preview of the image
It will done when user hit save button, after editing the gridview.
推荐答案
<form id="form1" runat="server">
<div>
<img id="ImagePreview" src="" />
<input type="file" id="files" name="files[]" multiple />
<script type="text/javascript">
function handleFileSelect(evt) {
var fileUpload = document.getElementById('files');
var files = evt.target.files; // FileList object
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
var base64Data;
reader.onload = (function (theFile) {
return function (e) {
base64Data = e.target.result;
document.getElementById('ImagePreview').src = base64Data;
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<div>
</div>
</div>
</form>
这是示例代码在没有任何回发的情况下在图像控件中预览图像。
This is the sample code to preview the image in image control without any postback.
好的，根据你的解释，你想在不同的页面中使用图像，是吗？
First你所有的错误都在：
Ok, According to your explanation, you want to use the image in different page, is it?
First of all your error is in:
<asp:image runat="server" id="student_Pic" imageurl="~/frmImagePrev.aspx" imagealign="Middle" alternatetext="Insert Picture" xmlns:asp="#unknown"></asp:image>
它应该是：
it should be:
<a href="WebForm2.aspx">
<asp:Image runat="server" ID="student_Pic" ImageUrl="~/images/image_link.jpg" ImageAlign="Middle" AlternateText="Insert Picture"/>
</a>
因为你正在使用图片作为图片按钮好吗？
接下来，你想要保持你的图像价值在会话上（根据你的解释）吧？
我建议你不要在会话中存储图像字节，因为会话中的图像字节会使你的页面变慢。你可以找到另一种方式。
但如果你真的想在会话中存储图像byte []然后将图像转换为byte []然后存储byte []值在会议中，不仅仅是图片名称。
我再次要求你说明你的解释不是100％明确的。
谢谢。
Rashed ::孟加拉国。
because you are using the image as a image button ok?
next, you want to keep your image value on session( according to your explanation) right?
I will suggest you no to store image byte in session because, image byte in session will make your page to slow. you can find alternative way.
but if you really want to store image byte[] in session then convert the image to byte[] then store the byte[] value in session, not only image name.
again I am requesting you that your explanation is not 100% clear to me.
Thank you.
Rashed::Bangladesh.
我想我的解释不清楚你
让我们举个例子
要求：
1.有一个gridview
2.它必须有编辑每行中的/删除按钮
I think my explanation is not clear to u
Lets take a example
Requirement :
1. There is one gridview
2. It must have edit/delete button in every row
AutoGenerateEditButton="True"在gridview中使用它。
3.用户点击时在编辑按钮中，整行（用户单击的位置）显示更新和取消按钮以及以可编辑模式打开的网格。根据我的网格，它有两个fileupload选项
我的网格是
using this in gridview.
3. When user click in the edit button the entire row (Where user click) shows the update and cancel button and grid opened in editable mode. According to my grid it have two fileupload option
My grid is
<asp:GridView ID="gdvstudent" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True"
CellPadding="4" AllowSorting="True" OnSorting="gdvstudent_Sorting" ForeColor="#333333"
ShowFooter="true" SortedAscendingCellStyle-BackColor="Blue" HorizontalAlign="Center"
AllowPaging="True" PageSize="5" Width="754px">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Student Name" SortExpression="txt_student_name">
<ItemTemplate>
<%#Eval("txt_student_name")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtStudentName" runat="server" Text='<%#Eval("txt_student_name")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Roll" SortExpression="txt_student_roll">
<ItemTemplate>
<%#Eval("txt_student_roll")%></ItemTemplate>
<EditItemTemplate>
<asp:Label ID="txtstudentroll" runat="server" Text='<%#Eval("txt_student_roll")%>'></asp:Label>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student class" SortExpression="txt_student_class">
<ItemTemplate>
<%#Eval("txt_student_class")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtstudentclass" runat="server" Text='<%#Eval("txt_student_class")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Marks" SortExpression="txt_student_marks">
<ItemTemplate>
<%#Eval("txt_student_marks")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtstudentmarks" runat="server" Text='<%#Eval("txt_student_marks")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student DOB" SortExpression="txt_student_dob">
<ItemTemplate>
<%#Eval("txt_student_dob")%></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtstudentdob" runat="server" Text='<%#Eval("txt_student_dob")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Resume">
<ItemTemplate>
<asp:LinkButton runat="server" ID="student_resume" CommandArgument='<%# Bind("student_resume") %>'
Visible="false" OnClick="DownloadFile" Text="Resume">
</asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="fileupload" FileName='<%# Bind("student_resume") %>' runat="server">
</asp:FileUpload>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student Picture">
<ItemTemplate>
<asp:Image runat="server" ID="student_Pic" ImageUrl="~/frmImagePrev.aspx" ImageAlign="Middle" AlternateText="Insert Picture"></asp:Image>
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="fileupload1" FileName='<%# Bind("student_pic") %>' runat="server">
</asp:FileUpload>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edited" Visible="False">
<ItemTemplate>
<asp:CheckBox ID="ChkboxEdit" runat="server" Checked='<%#Eval("edited")%>' />
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="ChkboxEdit" runat="server" Checked='<%#Eval("edited")%>' />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="Azure" />
<SortedAscendingHeaderStyle BackColor="Aqua" />
<SortedDescendingCellStyle BackColor="Blue" />
<SortedDescendingHeaderStyle BackColor="BlueViolet" />
</asp:GridView>
One for the resume upload and one for picture upload.
When user updated the information and upload its resume and picture and hit in the upload button the row again come back to select mode and the respective cell in that row where picture has been uploaded shows the picture.
4. The picture must not save in the database or in physical path while uploading / editing.
Clarification:
1. I don’’t want to save the image in session. Because all of my experiment gone into vain so i decide to make an item template like this
One for the resume upload and one for picture upload.
When user updated the information and upload its resume and picture and hit in the upload button the row again come back to select mode and the respective cell in that row where picture has been uploaded shows the picture.
4. The picture must not save in the database or in physical path while uploading / editing.
Clarification:
1. I don''t want to save the image in session. Because all of my experiment gone into vain so i decide to make an item template like this
<asp:templatefield headertext="Student Picture" xmlns:asp="#unknown">
<itemtemplate>
<asp:image runat="server" id="student_Pic" imageurl="~/frmImagePrev.aspx" imagealign="Middle" alternatetext="Insert Picture"></asp:image>
</itemtemplate>
<edititemtemplate>
<asp:fileupload id="fileupload1" filename="<%# Bind("student_pic") %>" runat="server">
</asp:fileupload>
</edititemtemplate>
</asp:templatefield>
here
here
ImageUrl="~/frmImagePrev.aspx"line redirect in the
line redirect in the
frmImagePrev.aspx page and then it shows the picture in all the cells throughout the grid view.
Write now i am stuck here.
2. but this is my approach i need to achieve the goal not the approach.
I think i am clear now what i need. If more explanation needed i am happy to give u it full code is needed pls give me the mail id i can send it to you.
Thanking you : Tanmoy (INDIA)
page and then it shows the picture in all the cells throughout the grid view.
Write now i am stuck here.
2. but this is my approach i need to achieve the goal not the approach.
I think i am clear now what i need. If more explanation needed i am happy to give u it full code is needed pls give me the mail id i can send it to you.
Thanking you : Tanmoy (INDIA)
这篇关于在gridview中预览图片而不使用Handler的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
