我的第一篇博客缓存显示图片

话不多说，直接入正题：

功能简介：实现上传若干图片，加入缓存，一直到最后全部保存的时候才保存进数据库，可为图片指定分组，图片要显示在相应分组里。

具体实现：

Ajax控件：

<asp:ScriptManager ID="smScript" runat="server"></asp:ScriptManager>

前台界面代码：

 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页面保存图片返回给父页面：

 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     }

脚本：

 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:

smScript.RegisterAsyncPostBackControl(lnkbtnBindAlbumDDL);

绑定相册列表：

 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     }

获取相册个数和相应相册图片数：

 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     }

追加图片：

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     } 

缓存相册以及图片信息：

 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     }

最后的保存：

 

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     }