最近要实现仿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=" 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=" 100px">
63 </td>
64 <td align="left">
65 说明：点增加图片按钮可一次上传多张图片，单张图片大小不大于1024k,一次最多上传8张</td>
66 </tr>
67 <tr>
68 <td align="right" style=" 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=" 300px" type="file" />
74
75 </input>
76 </td>
77 </tr>
78 <tr>
79 <td align="right" style=" 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=" 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=" 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>
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=" 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=" 100px">
63 </td>
64 <td align="left">
65 说明：点增加图片按钮可一次上传多张图片，单张图片大小不大于1024k,一次最多上传8张</td>
66 </tr>
67 <tr>
68 <td align="right" style=" 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=" 300px" type="file" />
74
75 </input>
76 </td>
77 </tr>
78 <tr>
79 <td align="right" style=" 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=" 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=" 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 }
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】这个地方有问题，在网上搜索一下，也没深入研究，后来我把利用关于文字描述的那些全部给灭拉，就没有上述的问题啦。
啰啰嗦嗦就暂时记录这么多，给自己以后备用。