积极答复者
如何在GridView控件更新时,预览上传图片文件?

问题
答案
全部回复
-
下面是一个完整的例子。你先拷贝成xx.aspx文件,下载mdb数据库,放在App_Data下,然后进行测试先看效果。数据库下载http://dotnet.aspx.cc/ASPNET20Book.rar
<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="true" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.OleDb" %> <script runat="server"> private int EditId = 0; private String ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\ASPNET20Book.mdb;"; /// <summary> /// 数据绑定的处理。在需要编辑时,显示出编辑框 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { if (EditId > 0) { //如果绑定数据源是DatarReader,则使用下面的方法: //System.Data.Common.DbDataRecord rowItem = (System.Data.Common.DbDataRecord)e.Row.DataItem; //如果绑定是 DataView,则使用此方法 System.Data.DataRowView rowItem = (System.Data.DataRowView)e.Row.DataItem; if (rowItem["id"].ToString().Equals(EditId.ToString())) { //隐藏显示的文字 PlaceHolder LabelTitle = e.Row.FindControl("LabelTitle") as PlaceHolder; LabelTitle.Visible = false; PlaceHolder LabelBirthday = e.Row.FindControl("LabelBirthday") as PlaceHolder; LabelBirthday.Visible = false; PlaceHolder LabelGender = e.Row.FindControl("LabelGender") as PlaceHolder; LabelGender.Visible = false; PlaceHolder LabelClassName = e.Row.FindControl("LabelClassName") as PlaceHolder; LabelClassName.Visible = false; PlaceHolder LabelPhoto = e.Row.FindControl("LabelPhoto") as PlaceHolder; LabelPhoto.Visible = true; PlaceHolder PlaceHolder1 = e.Row.FindControl("PlaceHolder1") as PlaceHolder; PlaceHolder1.Visible = false; //打开编辑框 TextBox uTitle = e.Row.FindControl("uTitle") as TextBox; uTitle.Visible = true; TextBox uBirthDay = e.Row.FindControl("uBirthDay") as TextBox; uBirthDay.Visible = true; RadioButtonList uGender = e.Row.FindControl("uGender") as RadioButtonList; uGender.Visible = true; DropDownList uClassName = e.Row.FindControl("uClassName") as DropDownList; uClassName.Visible = true; FileUpload uPhoto = e.Row.FindControl("uPhoto") as FileUpload; uPhoto.Visible = true; uPhoto.Attributes.Add("onchange", "onUploadImgChange(this,'preview_" + EditId + "', 'preview_fake_" + EditId + "', 'preview_size_fake_" + EditId + "')"); //赋原来的值 if (rowItem["Gender"] != DBNull.Value) { uGender.SelectedIndex = (Convert.ToBoolean(rowItem["Gender"]) ? 0 : 1); } if (rowItem["ClassName"] != DBNull.Value) { uClassName.Items.FindByText(rowItem["ClassName"].ToString()).Selected = true; } //显示编辑更新按钮 Panel PanelNormal = e.Row.FindControl("PanelNormal") as Panel; PanelNormal.Visible = false; Panel PanelUpdate = e.Row.FindControl("PanelUpdate") as Panel; PanelUpdate.Visible = true; } } } } /// <summary> /// 打开编辑框,将编辑标识传递到 EditId /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void EditClick(object sender, EventArgs e) { Button b = sender as Button; EditId = Convert.ToInt32(b.CommandArgument); GridViewRow dvr = b.NamingContainer as GridViewRow; EditId = (int)GridView1.DataKeys[dvr.DataItemIndex].Value; DataBind(); //Response.Write(GridView1.DataKeys[dvr.DataItemIndex].Value); } /// <summary> /// 将编辑的数据保存 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void UpdateClick(object sender, EventArgs e) { Button b = sender as Button; GridViewRow dvr = b.NamingContainer as GridViewRow; TextBox uTitle = dvr.FindControl("uTitle") as TextBox; string StudentTitle = uTitle.Text; string StudentBirthDay = ((TextBox)dvr.FindControl("uBirthDay")).Text; bool StudentGender = ((RadioButtonList)dvr.FindControl("uGender")).SelectedValue == "男" ? true : false; string StudentClassName = ((DropDownList)dvr.FindControl("uClassName")).SelectedValue; string StudentID = GridView1.DataKeys[dvr.RowIndex].Value.ToString(); string sql = ""; String PhotoPath = ""; bool HasFileUploaded = false; FileUpload oUpload = (FileUpload)dvr.FindControl("uPhoto"); if (oUpload.HasFile) { PhotoPath = Guid.NewGuid().ToString("D") + System.IO.Path.GetExtension(oUpload.FileName); oUpload.SaveAs(Server.MapPath("~") + "\\" + PhotoPath); HasFileUploaded = true; } if (HasFileUploaded) { sql = "Update Student Set Title=@Title,BirthDay = @BirthDay,"; sql += "Gender=@Gender,PhotoPath=@PhotoPath,ClassName=@ClassName Where id=@id"; } else { sql = "Update Student Set Title=@Title,BirthDay = @BirthDay,"; sql += "Gender=@Gender,ClassName=@ClassName Where id=@id"; } OleDbConnection cn = new OleDbConnection(ConnectionString); cn.Open(); OleDbCommand cmd = new OleDbCommand(sql, cn); cmd.Parameters.AddWithValue("@Title", StudentTitle); cmd.Parameters.AddWithValue("@BirthDay", StudentBirthDay); cmd.Parameters.AddWithValue("@Gender", StudentGender); if (HasFileUploaded) { cmd.Parameters.AddWithValue("@PhotoPath", PhotoPath); } cmd.Parameters.AddWithValue("@ClassName", StudentClassName); cmd.Parameters.AddWithValue("@id", StudentID); cmd.ExecuteNonQuery(); cn.Close(); Response.Redirect(Request.Url.ToString()); } /// <summary> /// 添加新记录 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void AddClick(object sender, EventArgs e) { InsertNewRecord(sender, e); } /// <summary> /// 取消编辑 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void CancelClick(object sender, EventArgs e) { Response.Redirect(Request.UrlReferrer.ToString()); } /// <summary> /// 删除记录 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void DeleteClick(object sender, EventArgs e) { Button b = sender as Button; int id = Convert.ToInt32(b.CommandArgument); OleDbConnection cn = new OleDbConnection(ConnectionString); cn.Open(); OleDbCommand cmd = new OleDbCommand("Delete From [Student] Where [id]=@id", cn); cmd.Parameters.AddWithValue("@id", id); cmd.ExecuteNonQuery(); cn.Close(); Response.Redirect(Request.Url.ToString()); } /// <summary> /// 插入新记录的公共函数 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void InsertNewRecord(object sender, EventArgs e) { string StudentTitle = ((TextBox)(sender as Button).NamingContainer.FindControl("NewTitle")).Text; if (StudentTitle.Trim() == "") { ErrorMsg.Text = "请输入姓名"; return; } string StudentBirthDay = ((TextBox)(sender as Button).NamingContainer.FindControl("NewBirthDay")).Text; bool StudentGender = ((RadioButtonList) (sender as Button).NamingContainer.FindControl("NewGender")).SelectedValue == "男" ? true : false; string StudentClassName = ((DropDownList) (sender as Button).NamingContainer.FindControl("NewClassName")).SelectedValue; FileUpload oUpload = (FileUpload)(sender as Button).NamingContainer.FindControl("AddPhoto"); String FileName = ""; FileName = Guid.NewGuid().ToString("D") + System.IO.Path.GetExtension(oUpload.FileName); oUpload.SaveAs(Server.MapPath("~") + "\\" + FileName); string sql = "Insert Into Student (Title,BirthDay,Gender,PhotoPath,ClassName)"; sql += " Values(@Title,@BirthDay,@Gender,@PhotoPath,@ClassName)"; OleDbConnection cn = new OleDbConnection(ConnectionString); cn.Open(); OleDbCommand cmd = new OleDbCommand(sql, cn); cmd.Parameters.AddWithValue("@Title", StudentTitle); cmd.Parameters.AddWithValue("@BirthDay", StudentBirthDay); cmd.Parameters.AddWithValue("@Gender", StudentGender); cmd.Parameters.AddWithValue("@PhotoPath", FileName); cmd.Parameters.AddWithValue("@ClassName", StudentClassName); cmd.ExecuteNonQuery(); cn.Close(); Response.Redirect(Request.FilePath.ToString()); } /// <summary> /// 加载页面 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { DataBind(); } } /// <summary> /// 绑定 GridView /// </summary> protected void DataBind() { String sql; OleDbConnection cn = new OleDbConnection(ConnectionString); cn.Open(); sql = "SELECT * FROM [Student] ORDER BY [id] DESC"; OleDbDataAdapter da = new OleDbDataAdapter(sql, cn); DataSet ds = new DataSet(); da.Fill(ds); GridView1.DataSource = ds.Tables[0].DefaultView; GridView1.DataBind(); cn.Close(); } </script> <!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 id="Head1" runat="server"> <title>GridView 插入、删除、修改的例子</title> <style type="text/css"> .preview_wrapper { display: inline-block; width: 300px; height: 300px; } .preview_fake { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } .preview_size_fake { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); visibility: hidden; } .preview { width: 300px; height: 300px; } </style> <script type="text/javascript"> function onUploadImgChange(sender, preview, preview_fake, preview_size_fake) { if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) { alert('图片格式无效!'); return false; } var objPreview = document.getElementById(preview); var objPreviewFake = document.getElementById(preview_fake); var objPreviewSizeFake = document.getElementById(preview_size_fake); if (sender.files && sender.files[0]) { objPreview.style.display = 'block'; objPreview.style.width = 'auto'; objPreview.style.height = 'auto'; objPreview.src = sender.files[0].getAsDataURL(); } else if (objPreviewFake.filters) { sender.select(); var imgSrc = document.selection.createRange().text; objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; autoSizePreview(objPreviewFake); objPreview.style.display = 'none'; } } function onPreviewLoad(sender) { autoSizePreview(sender); } function autoSizePreview(objPre) { objPre.style.width = 300 + 'px'; objPre.style.height = 300 + 'px'; objPre.style.marginTop = 0 + 'px'; objPre.style.marginLeft = 0 + 'px'; } </script> </head>
【孟子E章】 -
下半部分
<body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" OnRowDataBound="GridView1_RowDataBound" ShowFooter="true"> <HeaderStyle BackColor="#ccff99" Font-Bold="true" /> <Columns> <asp:TemplateField HeaderText="姓名"> <ItemTemplate> <asp:PlaceHolder ID="LabelTitle" runat="server"> <%#Eval("Title") %></asp:PlaceHolder> <asp:TextBox ID="uTitle" runat="server" Text='<%#Eval("Title") %>' Visible="false"></asp:TextBox> </ItemTemplate> <FooterTemplate> <asp:TextBox ID="NewTitle" runat="server"></asp:TextBox> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="生日(yyyy-MM-dd格式)"> <ItemTemplate> <asp:PlaceHolder ID="LabelBirthday" runat="server"> <%#Eval("BirthDay", "{0:yyyy-MM-dd}")%></asp:PlaceHolder> <asp:TextBox ID="uBirthDay" runat="server" Text='<%#Eval("BirthDay", "{0:yyyy-MM-dd}")%> ' Visible="false" /> </ItemTemplate> <FooterTemplate> <asp:TextBox ID="NewBirthDay" runat="server"></asp:TextBox> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="性别"> <ItemTemplate> <asp:PlaceHolder ID="LabelGender" runat="server"> <%#(Eval("Gender")).ToString() =="True"?"男":"女"%></asp:PlaceHolder> <asp:RadioButtonList ID="uGender" runat="server" RepeatDirection="Horizontal" Visible="false"> <asp:ListItem Text="男"></asp:ListItem> <asp:ListItem Text="女"></asp:ListItem> </asp:RadioButtonList> </ItemTemplate> <FooterTemplate> <asp:RadioButtonList ID="NewGender" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Selected="true" Text="男"></asp:ListItem> <asp:ListItem Text="女"></asp:ListItem> </asp:RadioButtonList> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="年级"> <ItemTemplate> <asp:PlaceHolder ID="LabelClassName" runat="server"> <%#Eval("ClassName")%></asp:PlaceHolder> <asp:DropDownList ID="uClassName" runat="server" Visible="false"> <asp:ListItem Text="小学" Value="小学"></asp:ListItem> <asp:ListItem Text="中学" Value="中学"></asp:ListItem> <asp:ListItem Text="高中" Value="高中"></asp:ListItem> <asp:ListItem Text="大学" Value="大学"></asp:ListItem> </asp:DropDownList> </ItemTemplate> <FooterTemplate> <asp:DropDownList ID="NewClassName" runat="server"> <asp:ListItem Text="小学" Value="小学"></asp:ListItem> <asp:ListItem Text="中学" Value="中学"></asp:ListItem> <asp:ListItem Text="高中" Value="高中"></asp:ListItem> <asp:ListItem Text="大学" Value="大学"></asp:ListItem> </asp:DropDownList> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="照片"> <ItemTemplate> <asp:PlaceHolder ID="LabelPhoto" runat="server" Visible="false"> <div class="preview_wrapper"> <div id="preview_fake_<%# Eval("id") %>" class="preview_fake"> <img id="preview_<%# Eval("id") %>" src='<%# Eval("PhotoPath") %>' class="preview" onload="onPreviewLoad(this)" /> </div> </div> <img id="preview_size_fake_<%# Eval("id") %>" class="preview_size_fake" /> </asp:PlaceHolder> <asp:PlaceHolder ID="PlaceHolder1" runat="server"> <img class="preview" src='<%# Eval("PhotoPath") %>' /> </asp:PlaceHolder> <asp:FileUpload ID="uPhoto" runat="server" Visible="false" /> </ItemTemplate> <FooterTemplate> <div class="preview_wrapper"> <div id="preview_fake_0" class="preview_fake"> <img id="preview_0" src='none.gif' class="preview" onload="onPreviewLoad(this)" /> </div> </div> <img id="preview_size_fake_0" class="preview_size_fake" /> <asp:FileUpload ID="AddPhoto" runat="server" onchange="onUploadImgChange(this,'preview_0', 'preview_fake_0', 'preview_size_fake_0')" /> </FooterTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="操作"> <ItemTemplate> <asp:Panel ID="PanelNormal" runat="server"> <asp:Button ID="EditButton" runat="server" Text="修改" OnClick="EditClick" CommandArgument='<%#Eval("id") %>' /> <asp:Button ID="DeleteButton" runat="server" Text="删除" OnClick="DeleteClick" CommandArgument='<%#Eval("id") %>' /> </asp:Panel> <asp:Panel ID="PanelUpdate" runat="server" Visible="false"> <asp:Button ID="UpdateButton" runat="server" Text="更新" OnClick="UpdateClick" CommandArgument='<%#Eval("id") %>' /> <asp:Button ID="CancelButton" runat="server" Text="取消" OnClick="CancelClick" /> </asp:Panel> </ItemTemplate> <FooterTemplate> <asp:Button ID="AddButton" runat="server" Text="添加新纪录" OnClick="AddClick" /> </FooterTemplate> </asp:TemplateField> </Columns> <EmptyDataTemplate> <table cellspacing="0" rules="all" border="1" style="border-collapse: collapse;"> <tr> <th> 姓名 </th> <th> 生日(yyyy-MM-dd格式) </th> <th> 性别 </th> <th> 年级 </th> <th> 照片 </th> <th> 操作 </th> </tr> <tr><td> <asp:TextBox ID="NewTitle" runat="server"></asp:TextBox> </td><td> <asp:TextBox ID="NewBirthDay" runat="server"></asp:TextBox> </td><td> <asp:RadioButtonList ID="NewGender" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Selected="true" Text="男"></asp:ListItem> <asp:ListItem Text="女"></asp:ListItem> </asp:RadioButtonList> </td><td> <asp:DropDownList ID="NewClassName" runat="server"> <asp:ListItem Text="小学" Value="小学"></asp:ListItem> <asp:ListItem Text="中学" Value="中学"></asp:ListItem> <asp:ListItem Text="高中" Value="高中"></asp:ListItem> <asp:ListItem Text="大学" Value="大学"></asp:ListItem> </asp:DropDownList> </td><td> <div class="preview_wrapper"> <div id="preview_fake_0" class="preview_fake"> <img id="preview_0" src='none.gif' class="preview" onload="onPreviewLoad(this)" /> </div> </div> <img id="preview_size_fake_0" class="preview_size_fake" /> <asp:FileUpload ID="AddPhoto" runat="server" onchange="onUploadImgChange(this,'preview_0', 'preview_fake_0', 'preview_size_fake_0')" /> </td><td> <asp:Button ID="b" runat="server" Text="添加学生" OnClick="AddClick" /> </td></tr> </table> </EmptyDataTemplate> </asp:GridView> <div id="Pager" runat="server" style="text-align: left; padding: 10px 0;"></div> <asp:Label ID="ErrorMsg" runat="server" ForeColor="red"></asp:Label> </form> </body> </html>
【孟子E章】