仿京东，qq相册效果的前台和后台实现的开发总结。

Posted on 2011-03-25 11:30 StartFromZero 阅读(1762) 评论(9) 编辑收藏举报

最近要实现仿qq相册，及京东那样的图片展示效果，然后就整理一下自己的资料。

效果图如下：

现在有一个问题就是下面的按钮一次性的只能翻转一组图片。就是五张。

把自己的源码给整理如下，需要这个效果的朋友可以直接使用。

源码下载前台部分：

另外一点就是关于下面图片的功能实现。

在后台如何实现图片的附加。

因为这个是一个产品，右侧是有有关这个产品的详细介绍的。这个产品的详细页面的内容。

下面是产品的相关图片展示。另外这个系统是原先开发的，只能在现在平台上作拓展。

1. product表存储产品的相关信息，我在数据库中另外建立一个新表extrapic，然后建立相应的字段，其中产品的编号作为product表的外键。使两个表建立关联。

2. 建立upload.aspx页面，实现页面的多文件上传，一次性做多上传8个，这里是在网上找的代码：

aspx：

View Code

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddProTest.aspx.cs" Inherits="Maticsoft.Web.AdminHonDu.global.AddProTest" %>
  2
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5 <html xmlns="http://www.w3.org/1999/xhtml" >
  6 <head runat="server">
  7     <title>无标题页</title>
  8     <script language="javascript" type="text/javascript">
  9     var i=1   ;
10
11     function addFile()
12
13     {
14
15
16
17     if (i<8)
18
19     {var str = '<BR> <input type="file" name="File" runat="server" style="width: 300px"/>'
20
21     document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
22
23
24
25     }
26
27     else
28
29     {
30
31     alert("您一次最多只能上传8张图片！")
32
33     }
34
35     i++
36
37     }
38
39
40
41     </script>
42 </head>
43 <body>
44     <form id="form1" runat="server">
45     <fieldset>
46     <legend>图片上传</legend>
47          <table id="Table1" align="center" border="0" cellpadding="1" cellspacing="1" class="table"
48             style="height: 58px" width="620">
49             <tr>
50                 <td align="center" background="../images/topbg1.jpg">
51                     <font color="#0000ff" face="宋体" size="3"><strong>上传图片</strong></font></td>
52             </tr>
53             <tr>
54                 <td align="center">
55                      </td>
56             </tr>
57             <tr>
58                 <td align="center">
59                     <asp:Panel ID="Panel5" runat="server" Width="608px">
60                            <table width="100%">
61                             <tr>
62                                 <td align="right" style="width: 100px">
63                                 </td>
64                                 <td align="left">
65                                     说明：点增加图片按钮可一次上传多张图片，单张图片大小不大于1024k,一次最多上传8张</td>
66                             </tr>
67                             <tr>
68                                 <td align="right" style="width: 100px">
69                                     请选择图片：<br />
70                                 </td>
71                                 <td align="left"><P id="MyFile">
72                                     <input onclick="addFile()" type="button" value="增加图片(Add)"><br />
73                                     <input id="File1" runat="server" name="File" style="width: 300px" type="file" />
74
75                                 </input>
76                                 </td>
77                             </tr>
78                             <tr>
79                                 <td align="right" style="width: 100px">
80                                     上传到的图库:</td>
81                                 <td align="left">
82                                     <asp:DropDownList ID="ddlAlbum" runat="server" DataSourceID="SqlDataSource1"
83                                         DataTextField="Name" DataValueField="ID">
84                                     </asp:DropDownList>
85                                     <asp:SqlDataSource ID="SqlDataSource1" runat="server"
86                                         ConnectionString="<%$ ConnectionStrings:strConnString %>"
87                                         SelectCommand="SELECT [ID], [Name], [XiaoTu], [LeiId] FROM [Product]">
88                                     </asp:SqlDataSource>
89                                 </td>
90                             </tr>
91                             <tr>
92                                 <td align="right" style="width: 100px">
93                                 </td>
94                                 <td align="left">
95                                     <asp:Button ID="btnUpload" runat="server" Text="开始上传" OnClick="btnUpload_Click" />
96                                     </td>
97                             </tr>
98                             <tr>
99                                 <td align="right" style="width: 100px">
100                                 </td>
101                                 <td align="left">
102                                     <asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label></td>
103                             </tr>
104                         </table>
105                     </asp:Panel>
106
107                 </td>
108             </tr>
109             <tr>
110                 <td align="center">
111                     <font face="宋体"></font><font face="宋体"> </font>
112                 </td>
113             </tr>
114             <tr>
115                 <td align="center">
116                     <font face="宋体"></font>
117                 </td>
118             </tr>
119         </table>
120
121 </fieldset>
122     </form>
123 </body>
124 </html>

Aspx.cs：

View Code

  1 using System;
  2 using System.Collections;
  3 using System.Configuration;
  4 using System.Data;
  5 using System.Linq;
  6 using System.Web;
  7 using System.Web.Security;
  8 using System.Web.UI;
  9 using System.Web.UI.HtmlControls;
10 using System.Web.UI.WebControls;
11 using System.Web.UI.WebControls.WebParts;
12 using System.Xml.Linq;
13 using System.IO;
14 using System.Data.SqlClient;
15
16
17 namespace Maticsoft.Web.AdminHonDu.global
18 {
19     public partial class AddProTest : System.Web.UI.Page
20     {
21         database db=new database();
22         protected void Page_Load(object sender, EventArgs e)
23         {
24
25         }
26         protected void btnUpload_Click(object sender, EventArgs e)
27         {
28             lblMessage.Text = "";
29             lblMessage.Visible = false;
30             System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
31             System.Text.StringBuilder strmsg = new System.Text.StringBuilder("");
32             string[] rd = Request.Form[1].Split(',');//获得图片描述的文本框字符串数组，为对应的图片的描述
33             string albumid = ddlAlbum.SelectedValue.Trim();
34             int ifile;
35             for (ifile = 0; ifile < files.Count; ifile++)
36             {
37                 if (files[ifile].FileName.Length > 0)
38                 {
39                     System.Web.HttpPostedFile postedfile = files[ifile];
40                     if (postedfile.ContentLength / 1024 > 1024)//单个文件不能大于1024k
41                     {
42                         strmsg.Append(Path.GetFileName(postedfile.FileName) + "---不能大于1024k<br>");
43                         break;
44                     }
45                     string fex = Path.GetExtension(postedfile.FileName);
46                     if (fex != ".jpg" && fex != ".JPG" && fex != ".gif" && fex != ".GIF")
47                     {
48                         strmsg.Append(Path.GetFileName(postedfile.FileName) + "---图片格式不对，只能是jpg或gif<br>");
49                         break;
50                     }
51                 }
52             }
53             if (strmsg.Length <= 0)//说明图片大小和格式都没问题
54             {
55                 //以下为创建图库目录
56                 string dirname = "pic0" + ddlAlbum.SelectedValue.Trim();
57                 string dirpath = Server.MapPath("http://www.cnblogs.com/pic");
58                 dirpath = dirpath + @"/" + dirname;
59                 if (Directory.Exists(dirpath) == false)
60                 {
61                     Directory.CreateDirectory(dirpath);
62                 }
63                 Random ro = new Random();
64                 int name = 1;
65                 for (int i = 0; i < files.Count; i++)
66                 {
67                     System.Web.HttpPostedFile myFile = files[i];
68                     string FileName = "";
69                     string FileExtention = "";
70                     string PicPath = "";
71                     FileName = System.IO.Path.GetFileName(myFile.FileName);
72                     string stro = ro.Next(0, 1000).ToString() + name.ToString();//产生一个随机数用于新命名的图片
73                     string NewName = DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + DateTime.Now.Millisecond.ToString() + stro;
74                     if (FileName.Length > 0)//有文件才执行上传操作再保存到数据库
75                     {
76                         FileExtention = System.IO.Path.GetExtension(myFile.FileName);
77
78                         string ppath = dirpath + @"/" + NewName + FileExtention;
79                         myFile.SaveAs(ppath);
80                         string FJname = FileName;
81                         PicPath =dirname + @"/" + NewName + FileExtention;
82
83                     }
84                     AddPicture(PicPath,albumid);//将图片信息保存到数据库
85                     if (name == 1)//如果为每次更新的第一张图片，则将它更新为象册的封面
86                     {
87                     }
88                     name = name + 1;//用来重命名规则的变量
89
90                 }
91             }
92             else
93             {
94                 lblMessage.Text = strmsg.ToString();
95                 lblMessage.Visible = true;
96             }
97         }
98
99
100    private void AddPicture(string imgpath,string ablumid)
101    {
102        db.Opendatabase();
103        SqlConnection  conn = db.con;
104        string sql = "insert ProductPic (OtherPic,ProductID) values('"+imgpath+"','"+ablumid+"')";
105        db.updatebase(sql);
106        db.Closedatabase();
107    }
108
109
110   }
111
112 }

3. 在产品页面利用repeater控件绑定传到extrapic表中的图片的路径。实现上图所示的效果。

开发过程中存在的几个问题：

1. js未结束的字符串常量。当调用js的时候，出现上述的错误，在网上搜索了一下，原来是编码方式不一致导致的。一个是utf-8，一个是gb2312.

2. 将截断字符串或者二进制数据。定义的存储图片路径为nvarchar（50），后来修改为varchar（500）

3. 另外就是那个图片上传的时候，当时我用的方法是把对应的多个图片名都放到product表中的一个字段里面，然后用逗号分隔，后来在利用split函数分隔，然后提取相应的图片，但是这样的话，到产品详细页面的时候，详细产品的图片就又要提取第一个图片的图片名。也就是绑定到详细页面的那个图片名字段里存储的是多个图片名，造成很麻烦。于是我就用从新建立一个表的方式。算是一种思考过程吧，留作自己以后参考，呵呵，菜鸟一个，慢慢提升吧！

4. 前台调用后台的方法。<% # 方法名（Eval（参数））%>比如前台的repeater控件中绑定的不是数据库字段的名字，而是数据库对应字段作为参数然后输出的值，则用这种方式来实现。

5. <asp:image>控件在gridview中绑定数据源中的图片不显示，不知道咋回事，后来用,<img>标签搞定。

6. 遍历文件实现对文件的删除功能的实现。实例化FileInfo类后，其中的delete方法要的是绝对路径，而在web中一般用的是相对路径，所以要用到server.mappath方法。

7. 索引超过数组范围。这个实在我修改多文件上传功能的实现过程中出现的问题，应该就是rd【i】这个地方有问题，在网上搜索一下，也没深入研究，后来我把利用关于文字描述的那些全部给灭拉，就没有上述的问题啦。

啰啰嗦嗦就暂时记录这么多，给自己以后备用。

刷新页面返回顶部

优秀是一种习惯，不求进步很大，但求天天进步。

公告

仿京东，qq相册效果的前台和后台实现的开发总结。