Jquery.Treeview+Jquery UI制作Web文件预览

效果图：

前台Html:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_26.QingShan.WebFileViewer._Default" %>

<!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>Jquery.Treeview+Jquery UI制作Web文件预览</title>
        <%--JS--%>
        <script src="Scripts/jquery-1.9.1.js" type="text/javascript"> </script>
        <script src="Scripts/jquery.treeview/jquery.cookie.js" type="text/javascript"> </script>
        <script src="Scripts/jquery.treeview/jquery.treeview.js" type="text/javascript"> </script>
        <script src="Scripts/jquery-ui-1.10.3/jquery-ui-1.10.3.min.js" type="text/javascript"> </script>
        <%--CSS--%>
        <link href="Scripts/jquery-ui-1.10.3/css/start/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="Scripts/jquery.treeview/jquery.treeview.css" rel="stylesheet"></link>
        <link href="Style/common.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="main">
                <p>
                    文件预览</p>
                <div class="mainContent">
                    <ul id="fileList" class="filetree">
                        <%= FileTreeHtml %></ul>
                    <script type="text/javascript">
                        $(function() {
                            //树形文件目录
                            $(".filetree").treeview();
                            //显示ToolTips
                            $(document).tooltip({
                                items: ".file",
                                track: true,
                                content: function() {
                                    var element = $(this);
                                    var name = element.attr("name");
                                    var img = element.attr("img");
                                    if (img != "") {
                                        return "<img class='toolTips' alt='" + name + "' src='" + img + "'>";
                                    }
                                    return "";
                                }
                            });

                        });
                    </script>
                </div>
            </div>
        </form>
    </body>
</html>

后台代码：

using System;
using System.IO;
using System.Text;
using System.Web;
using System.Web.UI;

namespace _26.QingShan.WebFileViewer
{
    public partial class _Default : Page
    {
        protected string FileTreeHtml { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                var directory = new DirectoryInfo(HttpContext.Current.Server.MapPath("~/FileLibrary"));
                if (Directory.Exists(directory.FullName))
                {
                    FileTreeHtml = FileTreeHelper.GetGuideTree(new StringBuilder(), directory.FullName,
                                                               directory.FullName);
                }
            }
        }
    }
}

生成树形导航Html的类：

using System;
using System.IO;
using System.Text;
using System.Web;

namespace Whir.WebSite.JavascriptDemos
{
    /// <summary>
    ///     树形文件夹Html内容生成类
    /// </summary>
    public class FileTreeHelper
    {
        /// <summary>
        ///     生成树形文件Html
        /// </summary>
        /// <param name="builder">用于存放拼接的Html，由于是递归拼接，调用方法时，传入空的StringBuilder即可</param>
        /// <param name="path">要显示的服务器端文件夹路径（物理路径）</param>
        /// <param name="replacePath">要替换掉的路径部分</param>
        /// <returns></returns>
        public static string GetGuideTree(StringBuilder builder, string path, string replacePath)
        {
            var currentDir = new DirectoryInfo(path);
            DirectoryInfo[] subDirs = currentDir.GetDirectories();
            if (subDirs.Length > 0)
            {
                builder.AppendFormat("<li><span class='folder' path='{0}'>{1}</span>" + Environment.NewLine,
                                     currentDir.FullName.Replace(replacePath, ""), currentDir.Name);
                builder.Append("    <ul>" + Environment.NewLine);
                foreach (DirectoryInfo dir in subDirs)
                {
                    GetGuideTree(builder, dir.FullName, replacePath);
                }
                FileInfo[] files = currentDir.GetFiles();
                if (files.Length > 0)
                {
                    foreach (FileInfo file in files)
                    {
                        string previewUrl = file.FullName.IsImage()
                                                ? GetFileWebUrl(
                                                    file.FullName.Replace(HttpContext.Current.Server.MapPath("~/"), ""))
                                                : string.Empty;
                        builder.AppendFormat("<li><span class='file' name='{0}' img='{1}' path='{2}'>{0}</span>" + Environment.NewLine, file.Name,
                                             previewUrl, file.FullName.Replace(replacePath, ""));
                    }
                }

                builder.Append("    </ul>" + Environment.NewLine);
                builder.Append("</li>" + Environment.NewLine);
            }
            else
            {
                builder.AppendFormat("<li  class='closed'><span class='folder' path='{0}'>{1}</span>" + Environment.NewLine,
                                     currentDir.FullName.Replace(replacePath, ""), currentDir.Name);
            }
            return builder.ToString();
        }

        public static string GetFileWebUrl(string filePath)
        {
            if (filePath.IsEmpty())
            {
                return string.Empty;
            }
            filePath = filePath.Replace("\\", "/");
            if (filePath.StartsWith("/"))
            {
                filePath = filePath.TrimStart('/');
            }
            return VirtualPathUtility.AppendTrailingSlash(HttpContext.Current.Request.ApplicationPath) + filePath;
        }
    }
}

完整Demo下载http://download.csdn.net/detail/a497785609/6926313