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

话不多说，直接入正题：

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

具体实现：

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="width: 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='width: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     }