话不多说，直接入正题：
功能简介：实现上传若干图片，加入缓存，一直到最后全部保存的时候才保存进数据库，可为图片指定分组，图片要显示在相应分组里。
具体实现：
Ajax控件：
View Code
1 <asp:ScriptManager ID="smScript" runat="server"></asp:ScriptManager>
前台界面代码：
View Code
1 图片信息：<table border="0" cellpadding="2" cellspacing="2" class="tableBox"> 2 <tr> 3 <td> 4 <table border="0" cellpadding="5" cellspacing="0" width="100%"> 5 <tr> 6 <td class="fieldTitle"> 7 相册图片信息： 8 </td> 9 <input id="hidAlbum" runat="server" type="hidden" /> 10 <td class="fieldBigCont" id="tdAlbumUpload" runat="server"> 11 <table> 12 <tr> 13 <td style="padding: 0px;"> 14 <asp:UpdatePanel ID="upAlbum" runat="server" UpdateMode="Conditional"> 15 <ContentTemplate> 16 <asp:DropDownList ID="ddlAlbum" runat="server" Width="100px" AppendDataBoundItems="true"> 17 </asp:DropDownList> 18 <a href="#" onclick="OpenAlbumWindow()" 19 style="color: Blue;">添加相册</a> 20 <asp:HiddenField ID="hidPhotoFileLength" runat="server" /> 21 <asp:HiddenField ID="hidPhotoFileName" runat="server" /></ContentTemplate> 22 </asp:UpdatePanel> 23 <asp:FileUpload ID="fuAlbum" runat="server" Width="297px" BorderWidth="1" BorderStyle="Solid" 24 BorderColor="#98AAB1" /> 25 图片描述：<input id="txtPhotoDesc" type="text" class="textinput" runat="server" style=" 200px;" /> 26 <asp:Button ID="lbtAppendPhoto" runat="server" OnClick="btnAppendPhoto" CausesValidation="false" 27 CssClass="btnCss" Text="上传"></asp:Button> 28 29 </td> 30 </tr> 31 </table> 32 <asp:UpdatePanel ID="upPhoto" runat="server" UpdateMode="Conditional"> 33 <ContentTemplate> 34 <table id="tbAlbum" runat="server"> 35 </table> 36 </ContentTemplate> 37 </asp:UpdatePanel> 38 </td> 39 </tr> 40 </table> 41 </td> 42 </tr> 43 </table>
Upload页面保存图片返回给父页面：
View Code
1 protected void btnAdd_Click(object sender, EventArgs e) 2 { 3 Common.UploadFiles uf; 4 string vPath = ConfigHelper.upLoadHomeImgPath; 5 lbl.Text = string.Empty; 6 uf = new Common.UploadFiles(vPath, FileUpload1,lbl,Common.Enums.FileTypeEnum.Pic.GetHashCode()); 7 if (lbl.Text != string.Empty && lbl.Text != "文件上传成功！") 8 { 9 Response.Write(string.Format("<script type='text/javascript'>alert('{0}');</script>", lbl.Text)); 10 return; 11 } 12 13 string fileName = uf.SavePic(); 14 string SmallImg = string.Empty; 15 if (Type == "2") 16 { 17 string vSmallPath = ConfigHelper.upLoadHomesmallImgPath; 18 uf = new Common.UploadFiles(vSmallPath, FileUpload1, lbl, Common.Enums.FileTypeEnum.Pic.GetHashCode()); 19 SmallImg = uf.SaveThumbnailsPic(180, 120); 20 } 21 string imgHtml = String.Format("<img src='{0}'/>", vPath+fileName); 22 23 if (uf.Width > 660) 24 { 25 imgHtml = String.Format("<a href='{0}'target='_brank'><img src='{0}' style='660px;height:500px;' /></a>", fileName); 26 } 27 28 if (Type == "1" || Type == "2") 29 Response.Write(string.Format("<script type='text/javascript'>window.opener.OnloadImg('{0}','{1}','{2}');window.close();</script>", fileName, SmallImg, Type)); 30 else 31 Response.Write("<script type='text/javascript'>window.opener.tinyMCE.execCommand('mceInsertContent',false,\"" + imgHtml + "\");window.close ();</script>"); 32 }
脚本：
View Code
1 //添加相册回调函数 2 function ReturnValueAlbum(file_name) { 3 if (file_name != undefined) { 4 document.getElementById("<%=this.hidSN_ID.ClientID %>").value = file_name; 5 document.getElementById("<%=this.lnkbtnBindAlbumDDL.ClientID %>").click(); 6 } 7 } 8 //移除图片 9 function DelPhoto(pid) { 10 if (confirm('确定移除该图片吗？')) { 11 document.getElementById("<%=this.hidSNAP_ID.ClientID %>").value = pid; 12 return true; 13 } 14 else 15 return false; 16 } 17 18 //添加相册 19 function OpenAlbumWindow() { 20 var NewsID = '<%=this.NewsID %>'; 21 window.open('AddAlbum.aspx?sn_id=' + NewsID, 'uploadWindow', 'width=300,height=120;toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); 22 return false; 23 } 24 25 function OnloadImg(filename,smallimg, tp) { 26 if (tp == "1") { 27 document.getElementById("<%=this.hidTitlePic.ClientID %>").value = filename; 28 document.getElementById("<%=this.lnkbtnOnloadTitle.ClientID %>").click(); 29 } 30 else if (tp == "2") { 31 document.getElementById("<%=this.hidTitleIllustration.ClientID %>").value = filename; 32 document.getElementById("<%=this.hidSmallTitleIllustration.ClientID %>").value = smallimg; 33 document.getElementById("<%=this.lnkbtnOnloadTitleIllustration.ClientID %>").click(); 34 } 35 }
Page_load里注册Linkbutton:
View Code
1 smScript.RegisterAsyncPostBackControl(lnkbtnBindAlbumDDL);
绑定相册列表：
View Code
1 调用： 2 BindAlbumDDL(NewsID); 3 4 方法： 5 /// <summary> 6 /// 绑定相册列表 7 /// </summary> 8 /// <param name="NewsID">主题编号</param> 9 public void BindAlbumDDL(string NewsID) 10 { 11 DataSet dsAlbum = SnaBll.GetList(" SN_ID='" + NewsID + "' order by CreateTime desc "); 12 DataTable dtAlbum = null != dsAlbum ? dsAlbum.Tables[0] : null; 13 14 ddlAlbum.Items.Clear(); 15 16 ddlAlbum.DataSource = dtAlbum; 17 ddlAlbum.DataValueField = "SNA_ID"; 18 ddlAlbum.DataTextField = "GroupName"; 19 ddlAlbum.DataBind(); 20 21 ddlAlbum.Items.Insert(0, new ListItem("-请选择相册-", "-1")); 22 }
获取相册个数和相应相册图片数：
View Code
1 /// <summary> 2 /// 获取该专题新闻相册个数 3 /// </summary> 4 /// <param name="NewsID">专题新闻编号</param> 5 /// <returns></returns> 6 private int GetAlbumCount(string NewsID, ref DataTable dtAlbum) 7 { 8 DataSet dsAlbum = SnaBll.GetList(" SN_ID='" + NewsID + "' order by CreateTime desc "); 9 dtAlbum = null != dsAlbum ? dsAlbum.Tables[0] : null; 10 11 int AlbumCount = null != dtAlbum ? dtAlbum.Rows.Count : 0; 12 13 return AlbumCount; 14 } 15 16 /// <summary> 17 /// 获取某专题新闻相册图片数 18 /// </summary> 19 /// <param name="AlbumID">相册编号</param> 20 /// <returns></returns> 21 private int GetAlbumPhotoCount(string AlbumID, ref DataTable dtAlbumPhoto) 22 { 23 DataRow[] drA = _dtAlbumPhoto.Select(" SNA_ID=" + AlbumID); 24 25 InitAlbumConditionDataSource(); 26 27 foreach (DataRow dr in drA) 28 { 29 GetAlbumConditionViewRowData(dr, AlbumID); 30 } 31 32 int AlbumPhotoCount = null != _dtAlbumConditionPhoto ? _dtAlbumConditionPhoto.Rows.Count : 0; 33 34 dtAlbumPhoto = _dtAlbumConditionPhoto; 35 36 return AlbumPhotoCount; 37 }
追加图片：
View Code
1 /// <summary> 2 /// 更新相册里的图片列表 3 /// </summary> 4 protected void btnAppendPhoto(object sender, EventArgs e) 5 { 6 if (ddlAlbum.Items.Count == 1) 7 { 8 MessageBox.Show(this, "请先创建一个相册"); 9 return; 10 } 11 if (ddlAlbum.SelectedValue == "" || ddlAlbum.SelectedValue == "-1") 12 { 13 MessageBox.Show(this, "请先选择一个相册"); 14 return; 15 } 16 if (hidPhotoFileLength.Value == string.Empty) 17 { 18 MessageBox.Show(this, "请先选择图片"); 19 return; 20 } 21 22 GetAlbumViewRowData(); 23 BindAlbumPhotoList(); 24 upAlbum.Update(); 25 }
缓存相册以及图片信息：
View Code
1 /// <summary> 2 /// 更新相册列表的新闻编号(包括相册里图片的新闻编号) 3 /// </summary> 4 /// <param name="SN_ID"></param> 5 private void UpdateAlbumList(string SN_ID) 6 { 7 _dtAlbumPhoto = (DataTable)ViewState["_AlbumPhoto_Items_"]; 8 9 if (null != _dtAlbumPhoto) 10 { 11 foreach (DataRow dr in _dtAlbumPhoto.Rows) 12 { 13 string SNAP_ID = dr["SNAP_ID"].ToString(); 14 int n = 0; 15 bool b = int.TryParse(SNAP_ID, out n); 16 17 if (b) 18 SnapModel = SnapBll.GetModel(int.Parse(SNAP_ID)); 19 SnapModel.PhotoTitle = dr["PhotoTitle"].ToString(); 20 SnapModel.PhotoUrl = dr["PhotoUrl"].ToString(); 21 SnapModel.SN_ID = SN_ID; 22 SnapModel.SNA_ID = int.Parse(dr["SNA_ID"].ToString()); 23 SnaModel = SnaBll.GetModel(SnapModel.SNA_ID.Value); 24 SnaModel.SN_ID = SN_ID; 25 26 if (b) 27 SnapBll.Update(SnapModel); 28 else 29 SnapBll.Add(SnapModel); 30 31 SnaBll.Update(SnaModel); 32 } 33 } 34 }
最后的保存：
View Code
1 /// <summary> 2 /// 保存 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name="e"></param> 6 protected void btnUpdate_Click(object sender, EventArgs e) 7 { 8 9 try 10 { 11 int t = 0; 12 13 if (NewsID == null || NewsID == "" || NewsID == "-1" || !int.TryParse(NewsID, out t)) 14 { 15 SnModel.State = 0; 16 int SN_ID = SnBll.Add(SnModel); 17 UpdateAlbumList(SN_ID.ToString()); 18 MessageBox.ShowAndRedirect(this, "添加成功", "SpecialNewsList.aspx"); 19 } 20 else 21 { 22 UpdateAlbumList(NewsID); 23 MessageBox.ShowAndRedirect(this, "修改成功", "SpecialNewsList.aspx"); 24 } 25 } 26 catch 27 { } 28 }