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 ;
}
}
}