效果图：



前台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
												


											
Jquery.Treeview+Jquery UI制作Web文件预览的更多相关文章
	

    
								
  1. Web方式预览Office/Word/Excel/pdf文件解决方案
		
    最近在做项目时需要在Web端预览一些Office文件,经过在万能的互联网上一番搜索确定并解决了. 虽然其中碰到的一些问题已经通过搜索和自己研究解决了,但是觉得有必要将整个过程记录下来,以方便自己以后查 ...
    
		
    2. 
						
  2. odoo13之文件预览widget/模块
		
    本文示例代码可查看github仓库:odoo13_file_preview 文件预览效果图展示 效果描述: 1.当点击图片或者文件时展开图片. 2.当点击关闭按钮时关闭图片预览. 3.当点击下载按钮时 ...
    
		
    3. 
						
  3. Java实现web在线预览office文档与pdf文档实例
		
    https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...
    
		
    4. 
						
  4. Qt SD卡 文件系统挂载、文件预览
		
    /********************************************************************************** * Qt SD卡 文件系统挂载. ...
    
		
    5. 
						
  5. java 文件转成pdf文件  预览
		
    一.前端代码 //预览功能 preview: function () { //判断选中状态 var ids =""; var num = 0; $(".checkbox& ...
    
		
    6. 
						
  6. java实现office文件预览
		
    不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...
    
		
    7. 
						
  7. COS控制台进阶 - 文件预览和在线编辑
		
    导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...
    
		
    8. 
						
  8. Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结
		
    Atitit.office word  excel  ppt pdf 的web在线预览方案与html转换方案 attilax 总结 1. office word  excel pdf 的web预览要求 ...
    
		
    9. 
						
  9. [Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图，Ay制作,AyWindow强势预览]
		
    原文:[Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览]  我的文章一定要做到对读者负责,否则就是失败的文章  -- ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. linux查看文件有多少行(WC)
			
    使用wc命令 具体通过wc --help 可以查看. 如:wc -l filename 就是查看文件里有多少行 wc -w filename 看文件里有多少个word. wc -L filename  ...
    
			
    2. 
						
  2. 浅谈ASP.NET的Postback
			
    说道ASP.NET的Postback,就得说Web Page的生命周期,但是Web Page的生命周期却不是三言两语就能够说得清楚的,所以在这里单纯站的编程的角度,撇开Web Page 的生命周期浅谈 ...
    
			
    3. 
						
  3. go语言基础之递归实现数字累加
			
    1.实现1+100 = 5050 示例: package main import "fmt" //实现1+2+3+……100 func test01() (sum int) { f ...
    
			
    4. 
						
  4. go语言基础之格式化输出
			
    1.fmt包的格式化输出输入 格式说明 格式 含义 %% 一个%字面量 %b 一个二进制整数值(基数为2),或者是一个(高级的)用科学计数法表示的指数为2的浮点数 %c 字符型.可以把输入的数字按照A ...
    
			
    5. 
						
  5. 各浏览器CSS兼容问题
			
    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...
    
			
    6. 
						
  6. java学习笔记13--反射机制与动态代理
			
    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note13.html,转载请注明源地址. Java的反射机制 在Java运行时环境中,对于任意 ...
    
			
    7. 
						
  7. mssql Sqlver 修改标识列方法
			
    摘自: http://www.cnblogs.com/badboy2008/articles/1145465.html MSSQL Server修改标识列方法   ----允许对系统表进行更新exec ...
    
			
    8. 
						
  8. 用mysqlslap对MySQL进行压力测试
			
    MySQL5.1地的确提供了好多有力的工具来帮助我们DBA进行数据库管理.现在看一下这个压力测试工具mysqlslap.关于他的选项手册上以及--help介绍的很详细.我解释一下一些常用的选项.这里要 ...
    
			
    9. 
						
  9. Windows-设置系统服务不开机启动
			
    设置为手动,则开机不会自动启动了
    
			
    10. 
						
  10. Git使用帮助
			
    1. 本地创建新项目 git init git add . git commit -m "First commit" 2. 本地代码同步Push到远程仓库 git remote a ...
    
			
    11.