效果图：



前台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. fdopen()和fileno()函数
			
    转:http://book.2cto.com/201212/11763.html 文件描述字函数是流函数的初等函数,每一个流都与一个描述字相连.给定一个打开的文件描述字,可以用fdopen()函数为它 ...
    
			
    2. 
						
  2. set是无序集合，放入set中的元素通过iterator输出时候是无序的
			
    set是无序集合,放入set中的元素通过iterator输出时候是无序的 HashMap<String , String> hashMap = new HashMap<String  ...
    
			
    3. 
						
  3. ClientDataSet的版本兼容性
			
    ClientDataSet的版本兼容性 在Delphi的早期版本中,Data这个Variant类型的值内部使用的是AnsiString来存贮的字节流,但我并不确定Delphi从什么时候开始,将其改为了 ...
    
			
    4. 
						
  4. 第六篇 ANDROID窗口系统机制之显示机制
			
    第六篇 ANDROID窗口系统机制之显示机制 ANDROID的显示系统是整个框架中最复杂的系统之一,涉及包括窗口管理服务.VIEW视图系统.SurfaceFlinger本地服务.硬件加速等.窗口管理服 ...
    
			
    5. 
						
  5. PHP：相对于C#，PHP中的个性化语法
			
    背景 今天把PHP的基本语法结构熟悉了一下,包括:变量.类型.常量.运算符.字符串.作用域和函数等,本文列举一些我需要强化记忆的结构(和C#不同). 一些个性化的结构 foreach结构 <?p ...
    
			
    6. 
						
  6. gradle 2.1构建android出现错误的解决方案
			
    转自:http://www.tuicool.com/articles/YJNJbuA 使用不同版本Gradle构建Andorid 出现Gradle version xxxx is required 坑 ...
    
			
    7. 
						
  7. Object 转换为 BigDecimal
			
    项目中遇到读取Excel文件里面的数据转为金额的情况,为了程序更加的健壮,进行处理如下: import java.math.BigDecimal; import java.math.BigIntege ...
    
			
    8. 
						
  8. OpenCV学习(12) 图像的腐蚀与膨胀(3)
			
    通过使用不同的结构元素来进行膨胀腐蚀操作,可以检测图像中的角点,下面就一步一步看这个算法如果实现角点检测. 原图像: 首先我们创建四个结构元素 先用十字结构元素对原图像进行膨胀操作,得到下面的图像 再 ...
    
			
    9. 
						
  9. 基于Spring Boot和Spring Cloud实现微服务架构学习--转
			
    原文地址:http://blog.csdn.net/enweitech/article/details/52582918 看了几周spring相关框架的书籍和官方demo,是时候开始总结下这中间的学习 ...
    
			
    10. 
						
  10. [小技巧] gcc attribute error 属性小试
			
    gcc __attribute__  里有一个属性是 error 能够用于编译时报错. 參考: https://gcc.gnu.org/onlinedocs/gcc-4.3.0/gcc/Functio ...
    
			
    11.