您的位置：首页 > 其它

利用Sharepoint里面Mysite的Shared Pictures的图片做相册 [包括创建文件夹,上传文件]

2010-08-18 14:39 771 查看

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中显示结果

修改后

相册效果

DEMO.rar

Technorati 标签: sharepoint,相册,uploadFile

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航