效果图：



前台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. windows系统上安装与使用Android NDK r8d(一)
			
    什么是NDK? NDK 提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so 和 java 应用一起打包成apk.这些工具对开发者的帮助是巨大的. NDK 集成了交叉编译器,并 ...
    
			
    2. 
						
  2. java多线程知识点汇总（二）多线程实例解析
			
    本实验主要考察多线程对单例模式的操作,和多线程对同一资源的读取,两个知识.实验涉及到三个类: 1)一个pojo类Student,包括set/get方法. 2)一个线程类,设置student的成员变量a ...
    
			
    3. 
						
  3. Fiddler2 中文手册
			
    原文:http://blog.sina.com.cn/s/blog_66a13b8f0100vgfi.html 最近一阵研究 Fiddler2 的使用来着,一开始看起来有点找不着北,索性就根据官网资料 ...
    
			
    4. 
						
  4. 从Log4j迁移到LogBack的理由
			
    英文原文:Reasons to prefer logback over log4j 无论从设计上还是实现上,Logback相对log4j而言有了相对多的改进.不过尽管难以一一细数,这里还是列举部分理由 ...
    
			
    5. 
						
  5. bootstrap设计站点中加入�代码高亮插件
			
    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...
    
			
    6. 
						
  6. Ubuntu12.04 挂载exFat格式U盘的方法（转）
			
    原文链接:Ubuntu12.04 挂载exFat格式U盘的方法 首先关于exFAT ,这里就不多作解释了,   再介绍一个软件fuse-exfat,   https://code.google.com ...
    
			
    7. 
						
  7. Hibernate 实体关联关系映射（转载）
			
    原文链接地址:http://lavasoft.blog.51cto.com/62575/39398/ Hibernate:Hibernate关联关系映射实例速查   Hibernate关联关系映射目录 ...
    
			
    8. 
						
  8. 深入JavaScript模块化编程
			
    今天看requirejs官网的manual,发现了下面这篇好文章,于是花点时间翻译了一下,翻译不好的地方请指正,谢谢!   推荐阅读原文:) http://www.adequatelygood.com ...
    
			
    9. 
						
  9. HackRF采集调频广播基带数据并使用Ocatve解调播放
			
    使用hackrf_transfer工具在Linux系统上,采集当地的一个调频广播,使用的采样频率为8MHz.得到IQ交错存储的8位有符号基带数据,在Octave中,先进行50倍抽取,变换到160K采样 ...
    
			
    10. 
						
  10. PostgreSQL源码分析之shared buffer与磁盘文件
			
    我们知道,PostgreSQL数据库中的信息,最终是要写入持久设备的.那么PostgreSQL是怎么将信息组织存储在磁盘上的呢? Bruce Momjian有一个slide <Insider P ...
    
			
    11.