效果图：



前台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. Raw-OS源代码分析之同优先级任务切换
			
    分析的内核版本号截止到2014-04-15,基于1.05正式版,blogs会及时跟进最新版本号的内核开发进度,若源代码凝视出现"???"字样,则是未深究理解部分. Raw-OS官方 ...
    
			
    2. 
						
  2. 【资料】wod辅法卷轴
			
    辅助:1.非口袋2.口袋3.特殊卷附录:腐法装备 第一部分:非口袋 卷轴装备位置效果修正:颈 +2等级修正单手 +2等级修正双手 +4等级修正戒指 无等级修正 后缀颈 黑曜石魔法护身符单手 黑曜石魔法 ...
    
			
    3. 
						
  3. 一个 MVC 框架以 MVVM 之「魂」复活了！
			
    GitHub: https://github.com/houfeng/mokit Mokit 最初编写于 2012 年,是一个面向移动应用的前端 mvc 框架,v3 版本进行了大量的重构或重写,并尽可 ...
    
			
    4. 
						
  4. Informatica 常用组件Source Qualifier之二 默认查询
			
    2 默认查询 对于关系源,PowerCenter Server 将在运行会话时为每个源限定符转换生成查询.对于每个在映射中使用的源列,默认查询均为 SELECT 语句.也就是说,PowerCenter ...
    
			
    5. 
						
  5. Java 命名小技巧
			
    存储信息: xxxStorage 映射: xxxMapping 通过参数获取某个对象: getxxxFor 处理器: xxxHanlder handle 检索: xxxretriever 验证器: x ...
    
			
    6. 
						
  6. EasyUI-EasyUI框架入门学习
			
    前言 新项目的开发前端技术打算采用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,需要我这菜鸟对EasyUI框架进行一些基础的 ...
    
			
    7. 
						
  7. 想搞机器学习，不会特征工程？你TM逗我那！
			
    原文:http://dataunion.org/20276.html 作者:JasonDing1354 引言 在之前学习机器学习技术中,很少关注特征工程(Feature Engineering),然而 ...
    
			
    8. 
						
  8. ActiveMQ API 详解
			
    4.1 开发JSM的步骤 广义上说,一个JMS 应用是几个JMS 客户端交换消息,开发JMS 客户端应用由以下几步构成:      用JNDI 得到ConnectionFactory 对象:      ...
    
			
    9. 
						
  9. win10 当前操作环境不支持支付宝控件 完美解决办法
			
    第一步,修改系统配置 在运行中输入“gpedit.msc”打开本地组策略编辑器: 打运行窗口的方法是:按win键+R (按下win键再按R键之后 同时松开)  win键 即windows 的微标键 如 ...
    
			
    10. 
						
  10. 性能测试工具 nGrinder 项目剖析及二次开发
			
    转:https://testerhome.com/topics/4225 0.背景 组内需要一款轻量级的性能测试工具,之前考虑过LR(太笨重,单实例,当然它的地位是不容置疑的),阿里云的PTS(htt ...
    
			
    11.