setting thumbnail picture enhancement.
SharePoint 2010 里面提供了一个Asset Library 类型的video 库,比sharepoint 2007增加了许多功能.如:利用SilverLight技术在线播放视频, 设置视频的Thumbnail Picture,视频的分类和过滤.
今天我介绍一下关于Thumbnail Picture. 在Asset Library库中,如果上传一个Video类型的文件,可以指定视频的Thumnail picture. 这个过程首先用户需要上传一个picture到Thumbnails Library.然后获取Picture的URL.,再把Picture的URL复制到 Preview Image URL 属性里面. 然后保存.一个简单的功能,需要执行多个步骤.
下面我介绍一下用JS+Page Handler方式,很容易实现Thumbnail Picture:
设置thumbnail picture需要在编辑页面操作,而Asset Library自带的编辑页面是无法编辑的,所以我们需要创建一个自定义的编辑属性页面.
对自定义属性页面不熟悉的参考: http://msdn.microsoft.com/en-us/library/ff394411.aspx
在自定义一个属性页面上,保留需要的属性.
如果没有Thumbnail library.请创建一个Asset Library类型的库叫Thumbnails. Thumbnails library 最好和video library在同一个web下面.
为了给用户更好的体验,我们决定用JQuery无刷新技术去上传 Picture, 查了SDK.用JQuery+WCF或者JQuery + Page Handler都可以实现.最终,我选择了JQuery+Page Handler实现上传.
· 首先需要引用三个JS文件(jquery-1.4.2.js, ajaxupload.js, sp.js).
v jquery-1.4.2.js :了解JQuery都知道,这个文件是JQuery的核心库,很容易操作页面的元素.
v ajaxupload.js 这个是ajax upload 的核心库
v sp.js 是SharePoint 2010 自带的Client object 库.
把它们的引用加入到自定义编辑页面中的PlaceHolderAdditionalPageHead PlaceHolder:
代码
<script src="JS Path/ajaxupload.js" type="text/javascript"></script>
<SharePoint:ScriptLink Name="sp.js" LoadAfterUI="true" Localizable="false" runat="server" ID="Scriptlink1"></SharePoint:ScriptLink>
· 添加上传Button和Image显示图片.
代码
<td valign="top" class="ms-formlabel" style="width: 120px">
<H3 class="ms-standardheader"><nobr>Set Thumbnail</nobr></H3>
</td>
<td width="400px" valign="top" class="ms-formbody">
<!--Begin Upload Thumbnail Picture>
<table cellpadding="3" cellspacing="3" border="0" width="99%">
<tr>
<td colspan="2" style="text-align:center"> <img id="ImgHostPicture" src="" width="240px" height="160px"></img>
</td>
</tr>
<tr> <td style="width:20%;"></td>
<td> <div id="uploadStatus" style="color: red;"></div> <input type="button" id="uploadFile" value="Upload thumbnail" />
</td> </tr>
</table>
</td>
</tr>
· 添加JS code去开启上传窗口.
代码
//user definded properties
var currWebUrl="";
var ThumbnailsLibraryUrl="/Thumbnails";
var StyleLibraryUrl="/Style Library";
//get the currect web url using client object module
function getWebProperties(){
var clientContext = new SP.ClientContext.get_current();
this.web = clientContext.get_web();
clientContext.load(this.web);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess),Function.createDelegate(this, this.onFailure));
}
function onSuccess(sender, args) {
currWebUrl=this.web.get_serverRelativeUrl();
if(currWebUrl!="") {
//bind the upload thumbnail function.
new AjaxUpload('#uploadFile', {
action: currWebUrl+'/_layouts/custom/VideoThumbnailHandler.ashx',
onComplete: function(file) {
var img= currWebUrl+ThumbnailsLibraryUrl+"/"+file; //combine with image url
$('#uploadStatus').html("");//remove the upload status
('#ImgHostPicture').attr("src",img);
$("input[title='Preview Image URL']").attr("value",img);
},
onSubmit: function(file, ext) {
if (!(ext && /^(bmp|jpg|png|jpeg|gif)$/i.test(ext))) {
alert('Invalid image Format.');
return false;
}
$('#uploadStatus').html("<li>"+file+"</li><img src='"+currWebUrl +"/style library/loading.gif' />");
}
});
}
}
function onFailure(sender, args) {
alert('failed to get list. Error:'+args.get_message());
}
//bind the uploading thumbail image event
$(document).ready(function() {
getWebProperties();
//set the default thumbnail or onload the existing thumbnail.
var dThumbnailUrl = "/sites/videodemo/_layouts/images/VideoPreview.png";
var previewimageurl=$("input[title='Preview Image URL']").attr("value");
if(previewimageurl==null || previewimageurl==""|| previewimageurl=="http://" )
{
$("#ImgHostPicture").attr("src",dThumbnailUrl );
}
else
{
$("#ImgHostPicture").attr("src",previewimageurl);
}
});
</script>
· AjaxUpload只能开启上传的窗口,Picture上传需要Page Handler 去执行最终upload功能.下面是Page Handler code.
代码
using System;
using System.Web;
using System.IO;
using System.Collections;
using Microsoft.SharePoint;
public class VideoThumbnailHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string result = "success";
HttpFileCollection hfc = context.Request.Files;
using (SPSite site = SPContext.Current.Site)
{
using (SPWeb web = SPContext.Current.Web)
{
web.AllowUnsafeUpdates = true;
for (int i = 0 ; i < hfc.Count ; i++)
{
try
{
// prepare metadata
Hashtable metadata = new Hashtable();
metadata.Add("Foo", "Bar");
// stream the data into a new SharePoint list item
string file_name = Path.GetFileName(hfc[i].FileName);
SPList list = web.GetList(web.Url + "/Thumbnails");
byte[] file_content = new byte[Convert.ToInt32(hfc[i].ContentLength)];
hfc[i].InputStream.Read(file_content, 0, Convert.ToInt32(hfc[i].InputStream.Length));
SPFile file = list.RootFolder.Files.Add(list.RootFolder.Url + "/" + file_name, file_content,metadata, true);
// update the title of the generated item
SPListItem item = file.Item;
item["Title"] = file_name;
item.SystemUpdate();
}
catch (Exception ex)
{
result = "failure " + ex.Message + " " + ex.InnerException;
}
}
web.AllowUnsafeUpdates = false;
}
}
context.Response.ContentType = "text/plain";
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
