利用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>
                    &nbsp;&nbsp;
                    <asp:Label ID="LblCurPage" runat="server" Text="Label"></asp:Label>
                    &nbsp;&nbsp;
                    <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中显示结果

修改后

相册效果

DEMO.rar

Technorati 标签: sharepoint,相册,uploadFile

posted on 2010-08-18 14:39 JoinJ 阅读(839) 评论(0) 编辑收藏举报