利用Sharepoint里面Mysite的Shared Pictures的图片做相册 [包括创建文件夹,上传文件]
Shared Pictures里面的图片做一个相册,且文件夹管理为树形!可以根据点击的树形节点创建其子节点(子文件夹)，相册则使用JQuery的插件lightbox-0.5，使用起来相对简单!
[更新]:由于昨天使用UpdatePanel后相册有点小问题,由于使用了UpdatePanel后,OnSelectedNodeChanged事件触发后,页面不会刷新，但是图片数据已经改变了, 前台的js 【$('#gallery div[id="gallery_sub"]').lightBox({ fixedNavigation: true });】并没有执行，所以照成了只有页面第一次进来后才有相册的效果，点击其他节点后，就没有相册效果了，而是以A标签另开窗口打开了图片
找到了问题所在, 就在节点改变事件，让他执行一下我们的js就Ok了！用 UpdatePanel 后，还真遇到不少的这样那样的问题! 修改的用下划线加粗
前台页面HTML代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreePic.aspx.cs" Inherits="TreePic" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> //JQuery主文件 <script src="js/jquery-1.3.js" type="text/javascript"></script> //相册JS <script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> //相册css <link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() { $("#preimg").css("display", "none"); }); function prePic(node) { $("#preimg").css("display", "block"); $("#preimg").attr("src", $(node).val()); $("#preimg").attr("alt", $(node).val()); } </script> <script type="text/javascript"> //加这句就可以了[下面的用A标签]
$(function() { //$('#gallery a').lightBox(); 修改之前的,因为觉得用A标签有点不方便
//fixedNavigation该属性默认显示图片上的 prev 和 next 按钮
$('#gallery div[id="gallery_sub"]').lightBox({ fixedNavigation: true }); }); </script> <style type="text/css"> img { border: 0; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> <table> <tr> <td> <%--tvPublic--%> <div> <asp:TreeView ID="tvPublic" runat="server" OnSelectedNodeChanged="tvPublic_SelectedNodeChanged"> </asp:TreeView> </div> </td> <td> <%--gallery--%> <asp:TextBox ID="tb_Value" runat="server"></asp:TextBox> <asp:Button ID="BtnCreate" runat="server" Text="Create" OnClick="BtnCreate_Click" /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" onchange="prePic(this)" /> <asp:Button ID="btn_upload" runat="server" Text="Upload" OnClick="btn_upload_Click" /><br /> <img src="" alt="" id="preimg" height="90px" width="80px" /> <div id="gallery"> <asp:DataList ID="DataList1" runat="server" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" GridLines="Both" RepeatColumns="5" RepeatDirection="Horizontal"> <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" /> <ItemStyle BackColor="White" ForeColor="#330099" /> <SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" /> <ItemTemplate> <%--<a href="<%#Eval("PicURL") %>"> <img src="<%#Eval("PicURL") %>" alt="" height="80px" width="80px" /> </a>--%>
<!--修改后-->
<div id="gallery_sub" href="<%#Eval("PicURL") %>" style="cursor: pointer;" title=”你的图片描述信息”> <img src="<%#Eval("PicURL") %>" alt="" height="100px" width="100px" style="margin: 10 10 10 10;" /> </div> </ItemTemplate> </asp:DataList> </div> <asp:LinkButton ID="BtnPrev" runat="server" OnClick="BtnPrev_Click">Prev</asp:LinkButton> <asp:Label ID="LblCurPage" runat="server" Text="Label"></asp:Label> <asp:LinkButton ID="BtnNext" runat="server" OnClick="BtnNext_Click">Next</asp:LinkButton> </td> </tr> </table> </div>
</ContentTemplate> <Triggers><asp:PostBackTrigger ControlID="btn_upload" /></Triggers> [注意必须要设置一下Triggers属性,不然上传图片会失败 见我的另一篇: 用UpdatePanel时FileUpload失效的问题] </asp:UpdatePanel>
</form> </body> </html>
后台代码：
using System; using System.Collections.Generic; using System.Linq; using System.Web.UI.WebControls; using Microsoft.SharePoint; /// <summary> /// sharepoint上传图片[相册] /// </summary> public partial class TreePic : BasePageCode {
///Mysite地址 [请确保mysite里面的(Shared Pictures)文档库存在]
private const string mySiteUrl = "http://jianghao:5000/personal/hao_jiang/default.aspx";
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack) return;
ViewState["pdsCurPage"] = 0;
SetData("Shared Pictures", tvPublic);
BindPic();
}
//递归获取文件夹
public void SetTree(SPFolder folder, TreeNode node)
{
foreach (SPFolder spFolder in folder.SubFolders)
{
//不显示隐藏的文件夹
if (spFolder.Item == null)
{
continue;
}
TreeNode subNode = new TreeNode(spFolder.Name, spFolder.Url);
node.ChildNodes.Add(subNode);
SetTree(spFolder, subNode);
}
}
//设置树形节点
public void SetData(string rootFolder,TreeView tv)
{
tv.Nodes.Clear();
using (SPSite site = new SPSite(mySiteUrl))
{
using (SPWeb web = site.RootWeb)
{
SPFolder folder = web.GetFolder(rootFolder);
TreeNode node = new TreeNode(rootFolder, folder.Url);
tv.Nodes.Add(node);
SetTree(folder, node);
}
}
if (tv.Nodes[0] != null)
tv.Nodes[0].Selected = true;//默认选中第一个
}
/// <summary>
/// 绑定图片
/// </summary>
private void BindPic()
{
List<Pic> pics = new List<Pic>();
ViewState["pdsCurPage"] = 0;
using (SPSite site = new SPSite(mySiteUrl))
{
site.AllowUnsafeUpdates = true;
using (SPWeb web = site.RootWeb)
{
web.AllowUnsafeUpdates = true;
SPFolder folder = web.GetFolder(tvPublic.SelectedNode.Value);
pics.AddRange(from SPFile item in folder.Files
select new Pic()
{
//http://jianghao:5000/ 这里修改为你的路径
PicURL = "http://jianghao:5000/" + item.ServerRelativeUrl
});
}
}
ViewState["datas"] = pics;
MyPdsDataBind();
}
//
protected void tvPublic_SelectedNodeChanged(object sender, EventArgs e)
{
BindPic();
System.Web.UI.ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), UniqueID, "$('#gallery div[id=\"gallery_sub\"]').lightBox({ fixedNavigation: true });", true);
/*** * 注意: 刚开始我使用下面的JS注册方法,我发现那是徒劳无功的! * 记住如果你使用了内容被UpdatePanel包围了，而你用想后台注册js * 那么一定记得使用ScriptManager.RegisterStartupScript()方法,这一点我经常忘记! * 当然很多js高手是自己写的ajax请求来实现效果! * */ //Page.ClientScript.RegisterStartupScript(this.GetType(), UniqueID, "$('#gallery div[id=\"tt\"]').lightBox({ fixedNavigation: true });", true); } /// <summary> /// 使用分页类 /// </summary> public void MyPdsDataBind() { PagedDataSource pds = new PagedDataSource { DataSource = (List<Pic>) ViewState["datas"], AllowPaging = true, PageSize = 5, CurrentPageIndex = Convert.ToInt32(ViewState["pdsCurPage"]) }; LblCurPage.Text = "第" + (pds.CurrentPageIndex + 1) + "页 / 共" + pds.PageCount + "页"; SetEnable(pds); DataList1.DataSource = pds; DataList1.DataBind(); } //设置上一页或下一页是否可用 private void SetEnable(PagedDataSource pds) { BtnPrev.Enabled = true; BtnNext.Enabled = true; if (pds.IsFirstPage) { BtnPrev.Enabled = false; } if (pds.IsLastPage) { BtnNext.Enabled = false; } } //点击上一页 protected void BtnPrev_Click(object sender, EventArgs e) { int curPage = Convert.ToInt32(ViewState["pdsCurPage"]); curPage--; ViewState["pdsCurPage"] = curPage; MyPdsDataBind(); } //点击下一页 protected void BtnNext_Click(object sender, EventArgs e) { int curPage = Convert.ToInt32(ViewState["pdsCurPage"]); curPage++; ViewState["pdsCurPage"] = curPage; MyPdsDataBind(); } [Serializable()] public class Pic { public string PicURL { get; set; } } /// <summary> /// 创建文件夹 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void BtnCreate_Click(object sender, EventArgs e) { if (tvPublic.SelectedNode == null) return; using (SPSite site = new SPSite(mySiteUrl)) { site.AllowUnsafeUpdates = true; using (SPWeb web = site.RootWeb) { web.AllowUnsafeUpdates = true; SPFolder folder = web.GetFolder("Shared Pictures"); folder.SubFolders.Add(tvPublic.SelectedNode.Value + "/" + tb_Value.Text.Trim()); } } SetData("Shared Pictures", tvPublic); } /// <summary> /// 上传文件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btn_upload_Click(object sender, EventArgs e) { if (tvPublic.SelectedNode == null) return; byte[] contents = FileUpload1.FileBytes; using (SPSite site = new SPSite(mySiteUrl)) { site.AllowUnsafeUpdates = true; using (SPWeb web = site.RootWeb) { web.AllowUnsafeUpdates = true; web.Files.Add(tvPublic.SelectedNode.Value + @"/" + FileUpload1.FileName, contents); } } BindPic(); } }
点击图片出现相册框,可用左右键翻看上下页, 当然也可以用鼠标点击图片上的PREV
![利用Sharepoint里面Mysite的Shared Pictures的图片做相册 [包括创建文件夹,上传文件]](http://images.cnblogs.com/cnblogs_com/jinho/WindowsLiveWriter/62193340e595_C7F5/3-8x6.png)
Sharepoint中显示结果
![利用Sharepoint里面Mysite的Shared Pictures的图片做相册 [包括创建文件夹,上传文件]](http://images.cnblogs.com/cnblogs_com/jinho/WindowsLiveWriter/62193340e595_C7F5/1-8x6.png)
修改后
![利用Sharepoint里面Mysite的Shared Pictures的图片做相册 [包括创建文件夹,上传文件]](http://images.cnblogs.com/cnblogs_com/jinho/WindowsLiveWriter/62193340e595_C7F5/2-8x6.png)
相册效果